bxslider - 悬停与克隆元素

时间:2014-03-02 14:16:00

标签: jquery bxslider

您好我正在使用bx滑块在网站上显示我的合作伙伴。

PHP代码如下所示:

$data .= '<div class="twocolor"><a href="'.$client['link'].'" class="thumbnail">
<img class="bw img-responsive" src="'.$client['image_bw'].'" alt="">
<img class="color img-responsive" style="display:none;" src="'.$client['image'].'" alt="">
</a></div>';

基本上我设置了两个标志 - 颜色和BW。在悬停时我更改图像不透明度以隐藏BW图片并显示颜色。

这是jQuery代码:

jQuery('.twocolor').hover(  
             function() {  
              jQuery(this).find('img.bw').stop().animate({ 'opacity': '0' }, 400);  
          },  
             function() {  
              jQuery(this).find('img.bw').stop().animate({ 'opacity': '1' }, 400);  
          });

问题是克隆的项目不受此jquery函数的影响。我应该怎么做才能克隆元素?

1 个答案:

答案 0 :(得分:2)

尝试使用 on()

$(document).on("mouseenter", ".twocolor", function(e) {
    jQuery(this).find('img.bw').stop().animate({ 'opacity': '0' }, 400); 
});

$(document).on("mouseleave", ".twocolor", function(e) {
    jQuery(this).find('img.bw').stop().animate({ 'opacity': '1' }, 400); 
});