Jquery 动画仅适用于一个元素

Posted 2023-05-08

【中文标题】Jquery 动画仅适用于一个元素

【英文标题】：Jquery animation works for only one element

【发布时间】：2014-08-27 19:03:58

【问题描述】：

该功能会阻止下面的图像褪色。 现在，仅适用于第二个元素 (div.logo)，我怎样才能让它同时适用于两个或多个？

我想我应该得到结果列表中每个元素的边框。怎么样？

任何帮助将不胜感激

演示：http://jsfiddle.net/2ZxwY/

JS：

function displayThese(selectorString) 
    var $heading = $(selectorString);
    var h1top = $heading.position().top;
    var h1bottom = h1top + $heading.height();
    var h1left = $heading.position().left;
    var h1right = h1top + $heading.width();

    var divs = $('li').filter(function () 
        var $e = $(this);
        var top = $e.position().top;
        var bottom = top + $e.height();
        var left = $e.position().left;
        var right = left + $e.width();

        return top > h1bottom || bottom < h1top || left > h1right || right < h1left;
    );
    return divs;


(function fadeInDiv() 
    var divsToChange = displayThese('h1, div.logo');
    var elem = divsToChange.eq(Math.floor(Math.random() * divsToChange.length));
    if (!elem.is(':visible')) 
        elem.prev().remove();
        elem.animate(
            opacity: 1
        , Math.floor(Math.random() * 1000), fadeInDiv);
     else 

        elem.animate(
            opacity: (Math.random() * 1)
        , Math.floor(Math.random() * 1000), function () 
            window.setTimeout(fadeInDiv);
        );
    

)();

$(window).resize(function () 
    // Get items that do not change    
    var divs = $('li').not(displayThese());
    divs.css(
        opacity: 0.3
    );
);

【参考方案1】：

首先你应该在文档加载结束时执行fadeInDiv()函数，因为在你的小提琴中，位置被计算为内联（所有'li'的顶部和底部相同）。

另一方面，在获取选择器的位置和维度时，它会获取第一个元素的属性。所以它不适用于你的例子。您只需要传递一个元素。

您需要做的是遍历匹配 selectorString 的元素，过滤不在这些元素后面的“li”元素列表。

function displayThese(selectorString) 
    var divs = $('li');

   // iterate through elements in selector filtering <li> elements
   $(selectorString).each( function( index, value ) 
       var $heading = $(this);
       var h1top = $heading.position().top;
       var h1bottom = h1top + $heading.height();
       var h1left = $heading.position().left;
       var h1right = h1top + $heading.width();   

     divs = divs.filter(function () 
         var $e = $(this);
         var top = $e.position().top;
         var bottom = top + $e.height();
         var left = $e.position().left;
         var right = left + $e.width();

         // return just the elements non touching the selectors
         return !(top < h1bottom && bottom > h1top && 
                 left < h1right && right > h1left);
     );
 );

  return divs;

在调整大小时，您必须停止当前动画并再次启动淡入淡出方法：

$(window).resize(function ()     
    $('li').stop();
    $('li').css("opacity", "0.3");
    fadeInDiv();    
);

这是fiddle

【讨论】：

非常感谢！它应该以相反的方式工作。所以图像会淡入淡出，但元素下方的图像不应该淡出

动画功能也没有了

我需要图像保持淡入淡出！你能帮忙吗？

你也可以看看resize功能吗？我应该执行fadeInDiv()；在那里？它似乎加速了？

干得好顺便说一句，只需要看看调整大小是否也有效