jQuery Simple Spy不再适用于jQuery 1.5

我试图在jQuery 1.5中使用Remy Sharp的Simple Spy（http://jqueryfordesigners.com/simple-jquery-spy-effect）。它在1.4下正常工作，但在1.5中，第一个消失后不会加载任何其他注释。jQuery Simple Spy不再适用于jQuery 1.5

任何人都可以看到什么需要更新的代码，所以它将与1.5工作？

$(function() { 
$('ul.spy').simpleSpy(); 
}); 

(function ($) { 

$.fn.simpleSpy = function (limit, interval) { 

limit = limit || 4; 
interval = interval || 4000; 

return this.each(function() { 
    // 1. setup 
     // capture a cache of all the list items 
     // chomp the list down to limit li elements 
    var $list = $(this), 
     items = [], // uninitialised 
     currentItem = limit, 
     total = 0, // initialise later on 
     height = $list.find('> li:first').height(); 

    // capture the cache 
    $list.find('> li').each(function() { 
     items.push('<li>' + $(this).html() + '</li>'); 
    }); 

    total = items.length; 

    $list.wrap('<div class="spyWrapper" />').parent().css({ height : height * limit }); 

    $list.find('> li').filter(':gt(' + (limit - 1) + ')').remove(); 

    // 2. effect   
    function spy() { 
     // insert a new item with opacity and height of zero 
     var $insert = $(items[currentItem]).css({ 
      height : 0, 
      opacity : 0, 
      display : 'none' 
     }).prependTo($list); 

     // fade the LAST item out 
     $list.find('> li:last').animate({ opacity : 0}, 1000, function() { 
      // increase the height of the NEW first item 
      $insert.animate({ height : height }, 1000).animate({ opacity : 1 }, 1000); 

      // AND at the same time - decrease the height of the LAST item 
      // $(this).animate({ height : 0 }, 1000, function() { 
       // finally fade the first item in (and we can remove the last) 
       $(this).remove(); 
      // }); 
     }); 

     currentItem++; 
     if (currentItem >= total) { 
      currentItem = 0; 
     } 

     setTimeout(spy, interval) 
    } 

    spy(); 
}); 
}; 

})(jQuery);

我已经公布了它JSBin副本，你可以看到发生了什么：

http://jsbin.com/olutu3

这里有一个工作版本与旧版本的jQuery：

http://jqueryfordesigners.com/demo/simple-spy.html

来源

2011-02-15 Cofey

这是什么意思“它在第一个消失后不加载任何额外的评论”？你能更详细地描述错误的性质吗？你看到控制台中记录的任何错误吗？ – treeface 2011-02-15 18:59:22

我编辑过我的帖子，所以你可以看到一个工作演示和一个与jQuery 1.5（可以在JSBin上编辑）。正如你所看到的，评论在消失后不再出现。 – Cofey 2011-02-15 19:03:38

OK OK spy()功能，在最顶端，尝试这样做：

var $insert = $(items[currentItem]).css({ 
    height : 0, 
    opacity : 0 
}).prependTo($list);

我有这样的嘲笑在这里：

http://jsfiddle.net/treeface/xaJ9F/（jsbin是讨厌我）

这里的区别是，你是不是宣布它应该是“显示：无”。 jQuery在改变对象的动画不透明度时所做的暗示性假设肯定有变化，因为插件创建者在将不透明度设置为1并将高度设置为px之后似乎不必更改显示值。这并不是最稳健的插件，但是...它不给你一个设置高度的选项，它只是假设第一个是它们的高度。

无论如何...尝试一下，看看它是否有效。如果不存在（或导致跨浏览器问题），请尝试重新插入display:none并在其后的某处调用$ insert.show（）。

来源

2011-02-15 19:17:45 treeface

正如@treeface所说，问题是在$insert元素上设置“display：none”。除此之外，我不认为插件应该像以前一样工作。我相信这会利用某些在1.5.0版本中修复的错误。另一个“修复”的原代码是：

... 
var $insert = $(items[currentItem]).css({ 
    height : 0, 
    opacity : 0, 
    display: 'none' 
}).prependTo($list); 

$list.find('> li:last').toggle().animate({ opacity : 0}, 1000, function() { 
...

注意添加.toggle()通话。为了使新插入的元素影响内容流，其必须必须具有可见的显示。

来源

2011-02-15 20:05:14

jQuery Simple Spy不再适用于jQuery 1.5

回答

相关问题