兩個div之間的jQuery幻燈片與圖像切換

我有一個jQuery動畫，我需要一些幫助。兩個div之間的jQuery幻燈片與圖像切換

目標是當用戶點擊圖像時向下滑動到下一個div（arrow-down.png）。當單擊該圖像並且頁面滾動到下一個div時，圖像src會更改（到arrow-up.png），並允許用戶滑回到原始div，並再次將圖像設置爲其原始狀態。

這是我的HTML。

<div class="ninth panel"> 
<div class="separator"> 
<img class="img-swap" src="images/arrow-down.png"> 
</div> 
<div class="contact-form"> 
<!-- code for form here --> 
</div> 
</div>

任何幫助將非常感激。

來源

2012-11-30 Steve Stevenson

試圖理解你想要做什麼，它不明確。這是你開始的東西：http://jsfiddle.net/Twisty/RTFk4/ – Twisty

不是我心中的想法，但謝謝你試圖幫助，我找到了一個解決方案，達到我想要的效果。 –

在玩了一會兒之後，我設法得到了我正在尋找的效果。這個代碼很可能會被優化，因爲我不是專家，但它可能會幫助某個人。

$("span.img-swap.down").on("click", function() { 
    // Checks if class is set to down, initiates animation, stop animation, then toggles classess 
    if ($('span.img-swap').is('.down')) { 
     $('html, body').stop().animate({ scrollTop: $('div.ninth.panel').offset().top }, 2000); 
     $('span.img-swap').toggleClass('down up'); 
    } 
    // If class is not down, checks if class is set to up, initiates animation, stop animation, then toggles classess 
    else if ($('span.img-swap').is('.up')) { 
     $('html, body').stop().animate({ scrollTop: $('div.eighth.panel').offset().top }, 2000); 
     $('span.img-swap').toggleClass('up down'); 
    } 
});

來源

2012-12-01 03:00:25

兩個div之間的jQuery幻燈片與圖像切換

回答

相關問題