1

这是我的ajax电话

// send the data to the server using .ajax() or .post()
        $.ajax({
            type: 'POST',
            url: 'addVideo',
            data: {
                video_title: title,
                playlist_name: playlist,
                url: id
                // csrfmiddlewaretoken: '{{ csrf_token }}',
            },
            success: function(response, textStatus, jqXHR){
                 bootstrap_alert.success('video saved successfully');
            },

            // callback handler that will be called on error
            error: function(jqXHR, textStatus, errorThrown){
                bootstrap_alert.error('There were some errors while saving the video. Please try in a while');
            },
        });

和notification功能

// setting up alerts on action
bootstrap_alert = function() {}
bootstrap_alert.success = function(message) {
  $('#feature').prepend('<div id="alert" class="alert alert-success"><!--a class="close" data-dismiss="alert">×</a--><span>'+message+'</span></div>');
  $('#alert').fadeOut(3000);
}
bootstrap_alert.error = function(message) {
  $('#feature').prepend('<div id="alert" class="alert alert-error"><!--a class="close" data-dismiss="alert">×</a--><span>'+message+'</span></div>');
  $('#alert').fadeOut(3000);
}

  • 当我ajax调用返回时，我看到一个 div 持续了 3 秒，然后它就消失了，但是我的页面很快向上移动，我想让这个过渡平滑

  • 是否可以将通知 div 放在feature3 秒后消失的 div 之上？

4

3 回答 3

4

您可以使用滑动效果使它变得更好。您可以插入内容，向下滑动，等待 3 秒，然后向上滑动。

var x =$("<div class='alert'>Alert</div>");
$("#c1").prepend(x);
x.slideDown(250).delay(3000).slideUp(250);​

小提琴示例：http: //jsfiddle.net/johnkoer/gxbTJ/15/

于 2012-08-07T21:44:35.907 回答
0

你可以把它叠在上面。使用 CSS 属性z-index。

于 2012-08-07T22:03:05.337 回答
0

您将无法使用 fadeOut() 来实现您所描述的效果，但您需要编写自定义animate()。fadeOut() 只会做fadeOut，然后你会看到浏览器试图填充空白空间。如果你想要两者，你需要编写一个淡入淡出和幻灯片的动画。或者，您可以只使用带有slideToggle()或slideUp()和slideDown()的幻灯片

要覆盖您的 div，请使用一些 CSS，例如：

#overlay {
z-indez:6000;
position:fixed; 
width: 100%;
height: 100%;   
top:0; 
left:0; 
}
于 2012-08-07T22:03:49.180 回答