jquery - 带有图像切换的两个 div 之间的 jQuery 滑动

Question

我有一个需要帮助的 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>

任何帮助将非常感激。

Answer 1

在玩了一会儿之后，我设法得到了我想要的效果。由于我不是专家，因此很可能会优化此代码，但它可能会帮助某些人。

$("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');
    }
});