Question

在我的jQuery中，我使用ID淡化了一个div。我希望fadein＆＃34;移动＆＃34;从左到右。

到目前为止我的代码段：

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

谁能帮帮我？

谢谢！

Answer 1

 $("#content").hide().show("slide", { direction: "left" }, 1500);

Answer 2

这比听起来更难实现。如果您需要支持IE8等旧版浏览器，那就更难了。

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

渐变的颜色至少为隐藏元素的大小，因此它看起来只是显示背景颜色，但会有一个超出元素边框的隐藏部分，并淡出在隐藏的部分透明。

然后，这是一个简单的动画叠加层的案例，以便逐渐暴露渐变，揭示其背后的内容。

您根本不会使用普通fadeIn()功能。即使它看起来像是侧面淡入，但从技术角度来看，将卡片从元素顶部滑出以显示它就像是一种效果。

在IE的旧版本中使用它可能会很棘手，它使用渐变的专有功能。理论上它应该是可能的，但IE8的filter渐变有很多怪癖可能会让你感到不舒服，如果你试图像这样做'聪明'的东西。

我没有时间为你编写一个可用的原型，但希望这能为你提供足够的启动来开始编写它。

Answer 3

$('#content').hide().fadeIn(function(){ 
    $('#content').animate({
        left: "80px"
    }, 500); 
},1500).css('left' ,'0');

Answer 4

//这就是你想要的

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>

Answer 5

这是快速简单方式：

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

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

此代码移动对象 100px ，使其处于原始位置。然后在渐渐消失时再回来。

祝你好运！

Answer 6

你可以使用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/

Answer 7

我个人使用 animate.css 库

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

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

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

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

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

您可以在此处查看文档：{{3}}

jQuery FadeIn从左到右

7 个答案: