1

ボタンをクリックすると、フォームへの追加が表示されるようにしようとしています。これには 2 つの問題があります。最初に新しいボタンが完全に非表示にならないのはなぜですか? 高さ 0 やパディングなどを指定しようとしましたが、新しいボタンを表示するアニメーションに他のアニメーションよりも時間がかかるのはなぜですか?

デモhttp://jsfiddle.net/mNRem/

これは私のjQueryコードです:

var duration = 3000;
var showWidth = "150px";
var formHidden = true;
var showHeight = $("#cancel-button").outerHeight(true)+"px";
var buttonPadding = $('#cancel-button').css("padding");
var buttonBorder = $('#cancel-button').css("border-width");
$('#new-name').width(0);
$('.hidden-form').height(0);
$('.buttons').css({padding: 0, "border-width": 0});
$('#change-form-button').click(function() {
  formHidden = !formHidden;
  var labelWidth  = formHidden? "0" : showWidth;
  var buttonWidth = formHidden? showWidth : "0";
  $('#new-name').animate({width: labelWidth}, duration);
  $('#change-form-button').animate({width: buttonWidth, padding: "0", "border-width": "0"}, duration);
  $('.hidden-form').animate({height: showHeight}, duration);
  $('.buttons').animate({padding: buttonPadding, "border-width": buttonBorder}, duration);
  return false;
});
4

1 に答える 1

1

非表示ボタンの場合は、css prop を使用します。display: none;

または、jQueryステートメント $('.buttons').css({ display: 'none' }); の方が良いでしょう。

アニメーションを改善するには、.hide()および.show()関数を使用してみてください。

$('.buttons').hide("fast");

そして、クリックで

$('.buttons').show();

ここを見てください: JsFiddle の例

于 2013-09-28T20:34:27.687 に答える