0

我只想div在用户选择时移动 a 。当用户单击链接时，会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/

4

3 回答 3

2

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

于 2012-11-02T15:06:54.023 回答
1

如上所述，这只需要第 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 -> Developer -> JavaScript Console 进行检查（在这种情况下，由于缺少括号，它显示了意外的 ; 错误）。

于 2012-11-02T14:54:00.317 回答
1

在缺少的括号旁边。 这是一个更新的代码，使 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;
}​

希望这可以帮助！

于 2012-11-02T15:05:32.920 回答