1

「onclick」を使用して、純粋なJavascriptを使用してDIVにスライド＆フェード効果を追加したいと思います。

コードはここにあります：http：//jsfiddle.net/TCUd5/

スライドする必要のあるDIVには、id="pulldown_contents_wrapper"があります。このDIVはSPANに含まれており、これもSPANをトリガーします。

<span onclick="toggleUpdatesPulldown(event, this, '4');" style="display: inline-block;" class="updates_pulldown" >
    <div class="pulldown_contents_wrapper" id="pulldown_contents_wrapper">

そして、SPANonclickを制御するJSコードは次のとおりだと思います。

var toggleUpdatesPulldown = function(event, element, user_id) {
  if( element.className=='updates_pulldown' ) {
    element.className= 'updates_pulldown_active';
    showNotifications();
  } else {
    element.className='updates_pulldown';
  }  
}

純粋なJSでそれを作ることができない場合、Mootoolsでそれをどのように行うことができるか考えていますか？（*純粋なJSまたはMootolsフレームワークのみを使用したい）。

私はからコードを実装しようとしました：なぜjavascript onclick divスライドが機能しないのですか？ しかし、結果はありません。

どうもありがとう。

私はMootoolsでそれを成し遂げることができました、しかし私はスライドとフェード効果を加える方法とマウスアウトの遅れを理解することができません

    window.addEvent('domready', function() {
        $('updates_pulldown').addEvents({
          mouseenter: function(){
            $('updates_pulldown').removeClass('updates_pulldown').addClass('updates_pulldown_active')
            $('pulldown_contents_wrapper').set('tween', {
              duration: 1000,
              physics: 'pow:in:out',
              transition: Fx.Transitions.Bounce.easeOut // This could have been also 'bounce:out'
            }).show();
          },
          mouseleave: function(){
            $('pulldown_contents_wrapper').set('tween', {
                duration: 1000,
                delay: 1000,
                }).hide();
            $('updates_pulldown').removeClass('updates_pulldown_active').addClass('updates_pulldown')
          },
        });
    });

  var toggleUpdatesPulldown = function(event, element, user_id) {
      showNotifications();
  }

何か案が？

4

1 に答える 1

3

jQueryははるかに簡単ですが、純粋なjavascriptを使用してそれを行うことができます。

CSSでは、トランジションを使用する必要があります

#thing { position:relative;
  top: 0px;
  opacity: 0.8;
  -moz-transition: top 1s linear, opacity 1s linear;
  -webkit-transition: top 1s linear, opacity 1s linear;
 }

次に、JavaScriptで要素の位置を変更すると、cssトランジションを介して変更されます。

var toggleUpdatesPulldown = function(event, element, user_id) {
  if( element.className=='updates_pulldown' ) {
     element.style.top = someValue; //something like '100px' will slide it down 100px
     element.style.opacity = '1.0'; //will fade the content in from 0.8 opacity to 1.0
     element.className= 'updates_pulldown_active';
    showNotifications();



編集-提供されたjQueryコード

jQueryライブラリを呼び出します。これはGoogleホスティングから最も簡単に実行できます

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

ホバー機能を作成します

$(document).ready(function() {
        $('.updates_pulldown').hover( //first function is mouseon, second is mouseout
            function() {
                $(this).animate({top: '50px'}).animate({opacity: '1.0'});
            },
            function() { //delay 1000 milliseconds, animate both position and opacity
                $(this).delay(1000).animate({top: '0px'}).animate({opacity: '0.5'});
            }
        )
    })

関数のタイミングは、遷移タグを使用してcssで設定したものと同じになります。クラス名の代わりに「this」を再度使用すると、カーソルを合わせたクラスの特定のインスタンスでのみ効果が発生するようになります。このアニメーションがあなたが求めていたものであるかどうかはわかりませんが、質問を正しく理解していれば、主な機能はあなたのために機能します。必要に応じて番号などを変更するだけです。

于 2012-10-19T19:28:15.260 に答える