1

基本的に、これは私がやろうとしていることです。コンテンツ、フォーム、ページの下部があり、表示が none に設定されています。私がやりたいことは、誰かが上向き矢印、画像アイコンをクリックすると、フォーム全体が上にスライドして表示され、表示されるようになりますが、矢印をもう一度クリックすると、フォームが元に戻り、下にスライドします。表示をなしに戻します。これは私がこれまでに持っているものです。

<div class="hidden_panel_wrapper">
<div class="hidden_panel_icon"> <img id="hidden_panel_icon" src="thumbnails/up_arrow.png"> </div>
<div class="hidden_panel hide" id="hidden_panel">
<div class="hidden_panel_form">
<form name="newsletter_subscribe" method="post" action="subscribe_success.php">
<input class="text_input" type="email" placeholder="Type E-Mail Address" name="email">
<input type="submit" class="button_input" value="Subscribe To Our Newsletter">
</form>
</div>
</div>
</div>

スライドトグルを使用すると、slidedownで要素が表示されることはわかっていますが、slideUPして要素を表示する方法がわかりません。私はjquery animateを見回しましたが、実際には理解できませんでした。また、javascript (object.style.top="-200px") を介して新しいスタイルを設定することも検討しましたが、実際には機能しませんでした。簡単に言うと、 slidetoggle ですが、コンテンツが上にスライドして表示され、下にスライドして display="none" に戻ります。

4

2 に答える 2

5

私はこれがあなたが望んでいるものだと信じています。http://jsfiddle.net/bR6Fs/

$(document).ready(function(e) {
  $(".caption").hide();
});
  var show = function() {
    $(".caption").slideUp(500);
  };  
  var hide = function() {
    $(".caption").slideDown(500);
  };
      $(".featured-image").hover(hide, show);
于 2013-02-28T04:48:36.517 に答える
0

jQueryanimateに加えていくつかの創造性が機能するはずです。必要なアニメーションの種類と、それをどこに配置するかについて知っていることに基づいて、この一部を微調整する必要がありますが、フレームワークは機能するはずです。

スクリプト：

//get height of window
var windowHeight = $(window).height();
//difference between window height and desired distance from top, e.g. 200px
var moveDistance = windowHeight - 200;
$('.hidden_panel_wrapper').css({'top' : moveDistance+'px', 'display' : 'block'});
$('.hidden_panel_wrapper').animate({top:0});

次に、それをスライドさせるのは基本的に逆です。

//get height of window
var windowHeight = $(window).height();
//difference between window height and desired distance from top, e.g. 200px
var moveDistance = windowHeight - 200;
$('.hidden_panel_wrapper').animate({top:moveDistance}).css('display' : 'none');

とは言うものの、多くのアニメーションを実行し、ビルド済みの関数用のより大きなツールキットが必要な場合にGoogleで使用できるjQueryアドオンは多数あります。

于 2013-02-28T04:52:54.667 に答える