砌體JQuery的滾動動畫

我在我的網站上使用jQuery砌體http://zakiyadavidson.com。砌體JQuery的滾動動畫

我想要做一個翻轉效果，如http://damiencorrell.com/。我的最終結果將出現在翻轉圖片文字時出現。

我試圖在下面的JS代碼添加：

//Set div dimensions equal to image's dimensions: 
$('#image_holder1').width($('#image_1').width()); 
$('#image_holder1').height($('#image_1').height()); 
$('#image_1').each(function(){ 
//set css of right: 
$(this).css({right: '-' + $(this).width() + 'px'})}) 
    //tell the browser what to do when hovering on the div: 
    $('#image_holder1').hover(function() { 
    //when mouse hover: 
$('#image_0').animate({ 
    right: '-' + $(this).width() + 'px' 
}, /*duration*/ 360, /*ease*/ 'swing'); 
$('#image_1').animate({ 
    right: '0px' 
}, /*duration*/ 360, /*ease*/ 'swing'); 
}, 

function() { 
//when mouse out, no hover: 
$('#image_0').animate({ 
    right: '0px' 
}, /*duration*/ 360, /*ease*/ 'swing'); 
$('#image_1').animate({ 
    right: '-' + $(this).width() + 'px' 
}, /*duration*/ 360, /*ease*/ 'swing'); 
});

除上面的js代碼，我在下面的CSS塊補充說：

#image_holder1 { 
overflow: hidden; 
} 

.image1 { 
position: absolute; 
}

磚石HTML看起來像下面上述加入的變化：

<div class="box photo col3" id="image_holder1"> 
    <img id="image_0" src="image_17.jpg" title="Family First" alt="Family First" /> 
    <img id="image_1" src="image_17Hover.jpg" />

...

而不是顯示爲鼠標懸停的圖像，您可以在加載頁面時看到它。砌體佈局現在沒有正確對齊。是因爲我有onload事件下的函數嗎？任何援助非常感謝。

來源

2012-12-20 webdevZ

我想通了！

一個簡單的jquery腳本可以做到這一點，並且可以讓您根據需要做很多圖片！

<script> 

jQuery(function() { 
$(".imgSwap img").hover(function() { 
    this.src = this.src.replace("_off", "_on"); 
}, function() { 
    this.src = this.src.replace("_on", "_off"); 
}); 
}); 

</script>

我希望這可以幫助你的其他人。

您可以前往我的網站查看工作腳本http://zakiyadavidson.com

來源

2012-12-31 04:13:03 webdevZ

砌體JQuery的滾動動畫

回答

相關問題