Question

有人可以帮助我。我有一个熔岩灯样式菜单。我真的很想看到我的文章像应用程序一样滑动，就像图像滑块一样。我已经制作了3篇（相同的）文章。我真的非常希望有人可以帮助我让它们滑动。

我自己尝试了一些东西，但被卡住了。

$(document).ready(function() {
    $(".aanbod").on("click", function () {
        $("#slide1").animate({ 'left': 0}, 600);
        $("#slide2").animate({ 'left': 375}, 600);
        $("#slide3").animate({ 'left': 375}, 0);
    });

    $(".vraag").on("click", function () {
        $("#slide2").animate({ 'left': 0}, 600);
        $("#slide1").animate({ 'left': -375}, 600);
        $("#slide3").animate({ 'left': 375}, 600);
    });

    $(".advertenties").on("click", function () {
        $("#slide1").animate({ 'left': 0}, 600);
        $("#slide2").animate({ 'left': -375}, 600);
        $("#slide3").animate({ 'left': 0}, 600);
    });
});

我在codepen中尝试过的代码 http://codepen.io/anon/pen/BcuoE

Answer 1

您应该将#slide1，#slide2和#slide3放在一个div中。并且仅为此div制作动画。

类似这样的内容，当#slide1，#slide2和#slide3位于名为#mainslide的div中时：

$(document).ready(function() {
    $(".aanbod").on("click", function () {
        $("#mainslide").animate({ 'left': 0}, 600);
    });

    $(".vraag").on("click", function () {
        $("#mainslide").animate({ 'left': -375}, 600);
    });

    $(".advertenties").on("click", function () {
         $("#mainslide").animate({ 'left': -750}, 600);
    });
});

需要jQuery内容滑块才能与我的菜单结合使用。请

1 个答案: