Question

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

基本上我有一个div Option1Div和一个ID为Option1的图片，当您点击该图片时，它应该将div从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/

使用jQuery动画化隐藏div宽度的更改

3 个答案: