4

在我的 jQuery 中，我淡入一个带有 ID 的 div。我希望淡入淡出从左到右“移动”。

到目前为止我的片段：

$('#content').hide().fadeIn(1500);

谁能帮我？

谢谢！

4

7 回答 7

4 
 $("#content").hide().show("slide", { direction: "left" }, 1500);
于 2013-08-22T12:28:36.920 回答
2

这将比听起来更难实现。如果你需要支持像 IE8 这样的旧浏览器，那就更难了。

我能想到的最实用的解决方案是使用与背景颜色相同的叠加元素，但使用渐变而不是纯色背景颜色。

渐变将具有至少与被隐藏元素的大小相同的纯色，以便它看起来只是显示背景色，但会有一个隐藏部分延伸到元素的边界之外，并淡出为透明那个隐藏的部分。

然后是一个简单的例子，对叠加层进行动画处理，使渐变逐渐暴露出来，露出它背后的内容。

您根本不会使用正常fadeIn()功能。尽管它看起来像横向淡入，但从技术角度来看，它就像将卡片从元素顶部滑出以显示它的效果。

在旧版本的 IE 中正确使用可能会很棘手，因为它使用了专有的渐变功能。这在理论上应该是可能的，但是 IE8 的filter渐变有很多怪癖，如果你想像这样用它们做“聪明”的事情，它们可能会让你发现。

我没有时间为你写一个工作原型，但希望这能给你足够的开始写它。

于 2013-08-22T12:30:32.213 回答
2 
$('#content').hide().fadeIn(function(){ 
    $('#content').animate({
        left: "80px"
    }, 500); 
},1500).css('left' ,'0');
于 2013-08-22T12:17:10.893 回答
2

这是一个快速简单的方法：

$("#ID").css({"position":"relative","opacity": 0, "left":"+=100"}); $("#ID").animate({left:0, opacity:1},2000);

您需要"opacity" :0, "position": "relative"(or Absolute)在 CSS 中指定或使用 JQuery 对其进行调整。就像我做过的那样。

此代码将对象从其原始位置移动100 像素。然后在淡入时再次返回。

祝你好运！

于 2016-02-16T18:14:34.260 回答
1

//这就是你想要的

var $marginLefty =    $("#content"); // your selector here

$marginLefty.animate({
     height:'toggle',width:'toggle',
      marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
        $marginLefty.outerWidth() :
        0
    });

下面编辑的示例示例

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){

var $marginLefty =    $("#content"); // your selector here

$marginLefty.animate({
     height:'toggle',width:'toggle',
      marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
        $marginLefty.outerWidth() :
        0
    });
  });
});
</script> 
</head>

<body>
<button>Start Animation</button>

<div id="content" style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
于 2013-08-22T12:57:37.583 回答
1

我个人使用 animate.css 库

只需将 css 文件链接到您的页面：

<link href= "https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">

您也可以下载文件并在本地提供。

然后只需将类“动画 slideInLeft”添加到您的元素中。

$('#content').show().addClass('animated slideInLeft');

您可以在此处查看文档：https ://animate.style/

于 2020-12-21T16:12:51.683 回答
1

您可以使用 CSS 过渡，结合其中的两个，宽度和不透明度。

-webkit-transition: width 500ms ease-in, opacity 1.5s ease-out;
-moz-transition: width 500ms ease-in, opacity 1.5s ease-out;
-o-transition: width 500ms ease-in, opacity 1.5s ease-out;
transition: width 500ms ease-in, opacity 1.5s ease-out;

让内容留在同一个地方看这个小提琴：http: //jsfiddle.net/LLn311un/1/

于 2016-08-24T16:48:19.423 回答