2

私はこれを数日間機能させようとしています。

基本的に私はdivOption1Divとidの画像を持っていOption1ます。画像をクリックすると、divからHiddenにVisible変更され、幅が0から500pxに変更されますが、これまでのところ何も起こりません。

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

3 に答える 3

3

divがdisplay:noneある場合は、表示が不透明度に依存しないため、最初に表示する必要があります。
試す：

$('#Option1').click(function() {
    $('#Option1Div').css({'display':'block','opacity':0}).animate({
        opacity: 0.25,
        width: "500 px"
    }, 5000, function() {
        // Animation complete.
    });
});
于 2012-10-03T22:20:49.520 に答える
1

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.
  });
});
于 2012-10-03T22:21:34.667 に答える
0

あなたは近くにいます。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/

于 2012-10-03T22:32:09.733 に答える