Question

我创建了一个名为content的元素和3个按钮＆＃34; portfolio＆＃34;，＆＃34; about＆＃34;，＆＃34; contact＆＃34;。我希望背景滚动到我点击的每个部分的某个部分。目前每个卷轴都有动画，如此

@-webkit-keyframes toPortfolioBg {
    from {background-position:inherit; }
    to {background-position: 0px ;}
}   
@-webkit-keyframes toAboutBg {
    from {background-position: inherit;}
    to {background-position: 1920px ;}  
}
@-webkit-keyframes toContactBg {
    from {background-position: inherit; }
    to {background-position: 3840px ;}  
}

和点击每个按钮时运行每个动画的js

$(".portfolio").click(function() {
    reset()
    $("#portfolio").show(); 
    $("#content").css({"-webkit-animation": "toPortfolioBg 5s forwards" });     
    $("#content").css({"animation": "toPortfolioBg 5s forwards" });     
})
$(".about").click(function() {
    reset()
    $("#about").show();
    $("#content").css({"-webkit-animation": "toAboutBg 5s forwards" });         
    $("#content").css({"animation": "toAboutBg 5s forwards" });
})
$(".contact").click(function() {
    reset()
    $("#contact").show();
    $("#content").css({"-webkit-animation": "toContactBg 5s forwards" }); 
    $("#content").css({"animation": "toContactBg 5s forwards" }); 
})

然而，目前它直接回到第一张图像，然后只要它做任何动画就会滚动。我希望它从当前位置滚动到某个位置。有可能吗？

注意：这是我正在滚动的图片的链接。 http://imgur.com/BE1Inmp 正如你所看到的，它是一张大图像上的3张图像。每个图像用于＆＃34;投资组合＆＃34;一个用于＆＃34;关于＆＃34;等。

Answer 1

使用.Animate而不是.css reference

 $("#content").animate({
    backgroundPositionX:"xpos", 
    backgroundPositionY:"ypos"
    },5000);

提示backgroundPositionX：＆＃34; + = 200像素＆＃34;将值设置为值=值+ 200 + px

滚动背景动画

1 个答案: