Question

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

（我正在点击一个Drupal视图，但我在常规的Stack Exchange上发布了这个，而不是Drupal的答案，因为我认为问题更可能是我的jQuery编码而不是Drupal）

页面设置的背景：

两张图片是相互叠加的CSS，一张“预告片”图片和一张“透露”图片。
标题也是位于图像顶部的CSS，具有更高的z-index，因此它始终显示在顶部。
标题和两个图像都位于外部div容器中，类 .views-row

这就是我想要实现的目标：

当我将鼠标悬停在“预告片”图片上时，它会动画，以便淡化为不透明度= 0，显示“显示”图像。
基于预告片图片上的相同悬停事件，我想更改“title”div背景的CSS。

目前发生了什么：

图像不透明度的变化按预期发生。
但是，“title”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

回答我自己的问题：

问题如下：

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);

Answer 2

2件事，你在悬停中2个输入和输出处理函数之间缺少一个逗号，而动画背景颜色的属性是“backgroundColor”，而不是“background”。我也认为你不需要使用find（）并且可以使用$（）直接访问元素。

以下是在FF＆amp;假设标题div的区域小于图像区域，以便可以在标题div未覆盖的图像区域上检测到悬停，Chrome可以执行您所描述的操作。

<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>

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

2 个答案: