1

2 つの要素 .show を 1 回のクリックでスライドさせようとしています。最初の要素 (img) を左からスライドインし、他の要素 (div) をボタン (div) のクリックで右からスライドインしたいと思います。次に、別のボタンがクリックされると、最初の 2 つの要素がフェードアウトし、次の 2 つの要素 (クリックされたボタンに対応) がスライドインします。

どうすればこれを達成できるか知っている人はいますか？私はJQueryが初めてです。これは私がhtmlのために持っているものです。

<div id="button1">Button1</div>
<div id="button2">Button2</div>
<div id="button3">Button3</div>

<div id="container">
<img id="slideleft1" src="img.png">
<div id="slideright1">I need this div to slide in from the right.</div>
</div>

    <div id="container">
<img id="slideleft2" src="img.png">
<div id="slideright2">I need this div to slide in from the right.</div>
</div>

    <div id="container">
<img id="slideleft3" src="img.png">
<div id="slideright3">I need this div to slide in from the right.</div>
</div>
4

3 に答える 3

0 
var $container = $( '#container' );
var $left = $( '#slideleft', $container ); // handle to the image
var $right = $( '#slideright', $container ); // handle to the div

// apply some styles to the container (could also be done with pure css)
$container.css( {
    'position'      : 'relative', // to use absolute positions inside
    'left'          : '0px',
    'top'           : '0px'
} );

// positionate the image outside from the container and hide it
$left.css( {
    'postion'       : 'absolute',
    'left'          : (-$left.width()) + 'px',
    'opacity'       : '0'
} );

// positionate the div outside from the container and hide it
$right.css( {
    'postion'       : 'absolute',
    'right'          : (-$right.width()) + 'px',
    'opacity'       : '0'
} );


// will be executed when the event "slideIn" is triggered to your container element
$( '#container' ).on( 'slideIn', function() {

    var $container = $( this );
    var $left = $( '#slideleft', $container ); // handle to the image
    var $right = $( '#slideright', $container ); // handle to the div

    // slide and fade in the left image
    $left.animate( {
        'left'      : '0px',
        'opacity'   : '1'
    } );

    // slide and fade in the right div
    $right.animate( {
        'right'      : '0px',
        'opacity'   : '1'
    } );

} );

イベントをトリガーするには、HTMLにこのようなものを書くことができます

<a onclick="$('#container').trigger('slideIn');">click me</a>
于 2012-12-21T09:20:27.110 に答える
0

私が正しければ、これで問題が解決するはずです：

$('#slideleft').animate({
    marginLeft: '50px'
  }, 1000, function() {
    // Animation complete.
});
$('#slideright').animate({
    marginRight: '200px'
  }, 1000, function() {
    // Animation complete.
});

こちらのデモをご覧ください。

これは正確な解決策ではありません。必要に応じて変更できます。

于 2012-12-21T09:26:07.477 に答える
0

bukfixart の回答に加えて、アニメーションをトリガーする必要があるものを誰かがすばやくクリックしている場合もカバーすることをお勧めします。

CSS:

#container{position:relative; background:silver; height:400px;}
#slideleft{ background:red; width:100px; height:100px; position:absolute;}
#sliderig

ht{背景：青; 幅:100px; 高さ:100px; 位置:絶対; 右:0} </p>

JS:

var shown = true;
$('body').click(function() {
    if(!$("#slideleft").is(':animated')) {
        if (shown) {        
          $('#slideleft').animate({
              left:"-100px"
          }, 500, function() {
              shown = !shown;
          });
          $('#slideright').animate({
              right:"-100px"
          }, 500, function() {
          });
        } else {
          $('#slideleft').animate({
              left:"0px"
          }, 500, function() {
              shown = !shown;
          });
          $('#slideright').animate({
              right:"0px"
          }, 500, function() {
          });
        }
    }
});

</p>

ここで、フィドルを持っています: http://jsfiddle.net/Rm4zy/

于 2012-12-21T09:26:47.980 に答える