在div上滾動併爲另一個div製作動畫

我有1到6個動態創建的div。我還在這些內嵌嵌套的div，當我在父div上滾動時，我想進行動畫製作。現在當我滾動它時，所有div都會動畫，我怎樣才能發送每一個作爲參數？在div上滾動併爲另一個div製作動畫

這裏是一個jsfiddle我的代碼

<div class="animate" id="indexJoinBanner" > 
    Roll over this should animate move1 
    <div class="move">move1XXXXXXXXXXXXX</div> 
    </div> 
    <div class="animate" id="indexJoinBanner" > 
    Roll over this should animate move2 
    <div class="move">move2XXXXXXXXXXXXX</div> 
    </div> 
    <div class="animate" id="indexJoinBanner" > 
    Roll over this should animate move3 
    <div class="move">move3XXXXXXXXXXXXX</div> 
    </div> 




<script> 
$('.animate').on('mouseover', function() { 
    $('.move').animate({ 
    left: "0px", 
    },500); 
}).on('mouseout', function() { 
    $('.move').animate({ 
    left: "-150px", 
    },500); 
}) 
</script>

來源

2013-03-12 vinylDeveloper

使用mouseenter和mouseleave。問題是當您在不需要的子元素之間移動時，會觸發mouseoever/mouseout。

http://jsfiddle.net/ExplosionPIlls/qNBEJ/3/

來源

2013-03-12 01:29:03

真棒，這樣的作品，如果我想要做這樣的事情是什麼？ [link]（http://jsfiddle.net/qNBEJ/5/） – vinylDeveloper 2013-03-12 01:35:25

@vinylDeveloper針對特定的'.move'元素。只要'$（「。move」）'找到所有'.move's。 http://jsfiddle.net/ExplosionPIlls/qNBEJ/6/ – 2013-03-12 01:39:11

甜！謝謝。 – vinylDeveloper 2013-03-12 01:40:38

通過調用$('.move')您要搜索與文檔類移動的所有元素，並要動畫當前懸停的元素的唯一子元素。同時它能夠更好地使用mouseenter和mouseleave（見文檔：mouseenter和mouseleave）

$('.animate').each(function() { 
    var self = $(this), 
     move = self.find('.move'); 
    self.on('mouseenter', function() { 
     move.animate({ 
      left: "0px" 
     }, 500); 
    }).on('mouseleave', function() { 
     move.animate({ 
      left: "-150px" 
     }, 500); 
    }); 
});

來源

2013-03-12 01:35:27 lupatus

在div上滾動併爲另一個div製作動畫

回答

相關問題