Question

我有一个jQuery动画，我需要一些帮助。

目标是在用户点击图片时向下滑动到后续div（arrow-down.png）。单击此图像并且页面滚动到下一个div时，图像src会更改（到arrow-up.png）并允许用户向上滑动到原始div，同时图像再次设置为其原始状态。 / p>

这是我的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');
    }
});

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

1 个答案: