Question

考虑以下HTML：

<div id="outer">
    <div id="inner">
        <p id="content">
            Some content
        </p>
    </div>
</div>

我可以使用以下jQuery从屏幕上#inner向右滑动：

$("#slide").animate( { 'marginLeft':'100%' },400, function(){ $(this).slideUp('fast'); $(this).css("margin-right","100%"); $(this).css("margin-left","0"); } );

但是，如何使用新内容（来自AJAX响应）制作相同的元素，从左侧向滑回？

我正在考虑重置边距（从margin-left:100%到margin-left:0; margin-right:100%），当它不在视野中时，然后使用动画从左侧滑入：

$("#slide").animate( { 'marginRight':'0' },400, function(){ $(this).slideDown('fast'); } );

将其滑回视图，但不是从屏幕左侧滑动。有任何想法吗？我从另一个StackExchange问题中得到.slideUp()，但不知道为什么水平幻灯片需要它。

Answer 1

只需使用.hover-effect:hover{ background-color: #000000; //or whatever colour fade you are looking for opacity: 0.5; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }方法重置边距：

＆＃13;

.css()

＆＃13;

$(function() {
  $("#outer").click(function() {
    $(this).animate({
      'marginLeft': '100%',
      'opacity': 0
    }, 200, function() {
      //==================================
      //call synchronous ajax here or move this block 
      //to the ajax done callback function

      //some ajax change
      $(this).css({
        "background": "blue"
      }).text("came back with new content");

      $(this).css({
        'marginLeft': '-100%'
      });
      $(this).animate({
        'marginLeft': '0',
        'opacity': 1
      }, 200);
      //=================================
    });
  });
});

＆＃13;

#outer {
  width: 100px;
  height: 100px;
  display: block;
  background: red;
}

＆＃13;

Answer 2

使用.css重置保证金，请在此处查看：https://jsfiddle.net/gdjypc7w/2/

<强> JS

function getSummary(id) {
    $.ajax({

        type: "GET",
        url: 'Your URL',
        data: "id=" + id,
        success: function (data) {
            // the data
            $('#summary').html(data);
        }

    });

}

$("button").click(function () {
    $("#inner").animate({
        marginLeft: $("body").width()
    }, 1000, function () {
        //$("#content").text(getSummary(id); Use your id here to retrieve new data
        $("#content").text("New content");
        $("#inner").css("margin-left", "-100%");
        $("#inner").animate({
            marginLeft: "0px"
        }, 1000);
    });
});

将元素向右滑出，然后从左侧向后滑动

2 个答案: