jquery - 使用 jQuery 动画化隐藏 div 宽度的变化

Question

几天来，我一直试图让它工作。

基本上我有一个 divOption1Div和一个带有 id 的图像Option1，当您单击图像时，它应该将divfrom更改Hidden为Visible，并将宽度从 0 更改为 500px，但到目前为止没有任何反应。

$('#Option1').click(function() {
  $('#Option1Div').animate({
    opacity: 0.25,
    width: "500 px"
  }, 5000, function() {
    // Animation complete.
  });
});

Answer 1

如果您的 div 必须display:none首先使其可见，因为显示与不透明度无关。
尝试：

$('#Option1').click(function() {
    $('#Option1Div').css({'display':'block','opacity':0}).animate({
        opacity: 0.25,
        width: "500 px"
    }, 5000, function() {
        // Animation complete.
    });
});

Answer 2

我可以看到您直接使用 jQuery animate() 手册中的代码。同样来自该页面：Note: Unlike shorthand animation methods such as .slideDown() and .fadeIn(), the .animate() method does not make hidden elements visible as part of the effect.

$('#Option1').click(function() {
  $('#Option1Div').show().animate({
    opacity: 0.25,
    width: "500 px"
  }, 5000, function() {
    // Animation complete.
  });
});

Answer 3

你很近。CSS 应该是这样的：

 #Option1Div { width: 0; height: 100px; opacity: 0; }

和 jQuery

$('#Option1').click(function() {
      var ele = $('#Option1Div');
      ele.animate({

               opacity    : 1,
               width      : '500px'

          }, 5000, function() {
          // Animation complete.
  });
});

jsfiddle：http: //jsfiddle.net/haHxC/