Question

我只想在用户选择时移动div。当用户点击链接时，会出现div，从右向左移动。然后div中有另一个链接，当用户点击它时，div应该从左到右移动并消失。

以下是我尝试过的jQuery代码：

$('#show').click(function(e){
    e.preventDefault();
    $('div').show().animate({ 'left': 0 }, 300;
});   

$('#hide').click(function(e){
    e.preventDefault();
    $('div').animate({'left': 2050}, 300,function() {$('div').hide()});
});

小提琴也附上，http://jsfiddle.net/sameerast/JNBAn/

Answer 1

我建议你注意css动画。请参阅此示例：http://slides.html5rocks.com/#css-transitions

Answer 2

如上所述，这只需要第4行的逗号，然后小提琴开始工作：

$('#show').click(function(e){
    e.preventDefault();
    $('div').show().animate({ 'left': 0 }, 300);
});   

$('#hide').click(function(e){
    e.preventDefault();
    $('div').animate({'left': 2050}, 300,function() {$('div').hide()});
});

作为旁注，我发现Chrome中的JavaScript控制台在这方面非常有用...通过View查看 - ＆gt;开发者 - ＆gt; JavaScript控制台（在这种情况下，它显示出意外;错误，因为缺少括号）。

Answer 3

除了缺失的括号外。 Here's an updated code使div显示从右到左，然后从左到右隐藏。

JS :(缺少括号）

$('#show').click(function(e){
    e.preventDefault();
    $('div').show().animate({'left': 0 }, 300);
});   

$('#hide').click(function(e){
    e.preventDefault();
    $('div').animate({'left': 2050}, 300,function() {$('div').hide()});
});

CSS：

div{
    width:100px; 
    height:100px;
    background:#333;
    color:#999;
    position:absolute;
    top:10px;
    left:2050px;
    text-align:center;
    display:none;
}

希望这有帮助！

Div使用jquery动画移动

3 个答案: