从单个悬停事件中为两个元素设置动画

Question

我想将鼠标悬停在一个元素上并让它从那个悬停事件中为两个元素设置动画，但是我的 jQuery 代码有问题。

（我以 Drupal 视图为主题，但我将其发布在常规 Stack Exchange 而不是 Drupal 答案上，因为我认为问题更可能是我的 jQuery 编码而不是 Drupal）

页面设置的背景：

• 两张图片是 CSS 放置在彼此之上，一张“预告”图片和一张“展示”图片。
• 标题也是位于图像顶部的 CSS，具有更高的 z-index，因此它始终显示在顶部。
• 标题和两个图像都位于一个外部 div 容器中，其类为 .views-row

这是我想要达到的目标：

• 当我将鼠标悬停在“预告片”图像上时，它会进行动画处理，使其逐渐消失为 opacity=0，从而显示“显示”图像。
• 基于预告图上的相同悬停事件，我想更改“标题”div 的背景的 CSS。

目前正在发生的事情：

• 图像不透明度更改按预期进行。
• 但是，“标题”div 上的背景没有改变

脚本如下：

(function ($) {
  $(document).ready(function(){
    var $container = $(".views-row");
    $container.find(".views-field-field-teaser-image").hover(
      function() {
          $(this).stop().animate({"opacity": "0", "-ms-filter": "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"},1000);
          $container.find(".views-field-title").stop().animate({"background": "rgba(0,0,0,0.4)"},400)}
      function() {
          $(this).stop().animate({"opacity": "1", "-ms-filter": "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"},1000)
          $container.find(".views-field-title").stop().animate({"background": "rgba(0,0,0,0)"},400)}
      );
  });
})(jQuery);

Answer 1

两件事，您在悬停中的 2 in 和 out 处理程序函数之间缺少逗号，并且动画背景颜色的属性是“backgroundColor”，而不是“background”。我也不认为你需要使用 find() 并且可以使用 $() 直接访问元素。

以下是在 FF 和 Chrome 上测试的代码，它执行您所描述的操作，假设标题 div 的区域小于图像的区域，以便可以在标题 div 未覆盖的图像区域上检测到悬停.

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
        <style>
            .views-field-title {position:absolute; top:0; z-index: 10; width:100px; height:20px; color:blue; background-color:yellow;}
            .views-field-field-teaser-image {position:absolute; top:0; z-index: 5}
            .views-field-field-reveal-image {position:absolute; top:0; z-index: 1}
        </style>
    </head>
    <body>
        <div class="views-row">
        <div class="views-field-title">TITLE</div>
        <img class="views-field-field-teaser-image" src="img/teaser.png">
        <img class="views-field-field-reveal-image" src="img/reveal.png">
        </div>

        <script>

        (function ($) {
          $(document).ready(function(){
            var $container = $(".views-row");
            $container.find(".views-field-field-teaser-image").hover(
              function() {
                  $(this).stop().animate({"opacity": "0", "-ms-filter": "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"},1000);
                  $(".views-field-title").stop().animate({"backgroundColor": "rgba(0,0,0,0.4)"},400)
              }, function() {
                 $(this).stop().animate({"opacity": "1", "-ms-filter": "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"},1000);
                 $(".views-field-title").stop().animate({"backgroundColor": "rgba(0,0,0,0)"},400);
              }
              );
          });
        })(jQuery);

        </script>
    </body>
</html>

Answer 2

回答我自己的问题：

问题如下：

• jQuery animate() 不支持 CSS 简写（例如 background:）
• 仅 jQuery Color 插件支持更改背景颜色。

另外：

• 由于它是一个 Drupal 视图，其中多个元素对每个 View Row 使用相同的类名，因此我还需要进行一些 DOM 遍历。

固定代码如下：

(function ($) {
$(document).ready(function(){
  var $container = $(".views-row");
  $container.find(".views-field-field-teaser-image").hover(
    function() {$(this).stop().animate({"opacity": "0", "-ms-filter": "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"},1000),
                $(this).closest(".views-row").find(".views-field-title").stop().animate({backgroundColor: "rgba(0,0,0,0.4)"},1000)},
    function() {$(this).stop().animate({"opacity": "1", "-ms-filter": "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"},1000),
                $(this).closest(".views-row").find(".views-field-title").stop().animate({backgroundColor: "rgba(0,0,0,0)"},1000)}
    );
});
})(jQuery);