0

シャッフル効果のある jQuery Cycle プラグインを使用しています。ホバー時に画像を拡大してから、より大きな画像でスライドショーを開始できるようにしたいと考えています。いくつかの異なる方法で CSS スタイリングを試みましたが、まだ成功していません。拡大またはシャッフルできるようですが、両方はできないようです。

これが私がこれまでに得たものです：

jsフィドル

<script type="text/javascript">
$(document).ready(function(){ 
    $('#s6').cycle({
        fx: 'shuffle',
        shuffle: {
            top:  -50,
            left:  145
        },
        easing: 'easeOutBack',
        delay: -1000,
        speed: 700,
        timeout: 3000,
    }).cycle("pause").hover(function() {
        $(this).cycle('resume');
    },function(){
        $(this).cycle('pause');
    });
});
</script>
<div id="s6">
    <img border="0" src="http://s3.amazonaws.com/dfc_attachments/images/3216165 /pool_house_fireplace_web.JPG" alt="Poolhouse Fireplace" width="150" height="100"/> 
    <img border="0" src="http://s3.amazonaws.com/dfc_attachments/images/3216093/pool_house_kitchen_web.JPG" alt="Poolhouse Kitchen" width="150" height="100"/> 
</div>
4

2 に答える 2

1

あなたはこのようなことを試すことができます：

$('#s6').one('mousenter', function() {
    $(this).animate({ width: xxxx, height: yyy }, function() { 
        /* resize complete, call cycle*/

        $(this).cycle({
            fx: 'shuffle',
            shuffle: {
                top: -50,
                left: 145
            },
            easing: 'easeOutBack',
            delay: -1000,
            speed: 700,
            timeout: 3000,
        }).hover(function() {
            $(this).cycle('resume');
        }, function() {
            $(this).cycle('pause');
        });
    });
});

one()メソッドは1回だけ起動します

APIリファレンスhttp://api.jquery.com/one/

于 2013-01-30T03:05:35.993 に答える
0

コンテナー div を使用し、ホバーしたときにスケールアップするように設定し、ホバーしたときにのみスライドショーを再生するように設定しました。

実施例

CSS

.ImageContainer:hover{
       transition:all .3s;
       transform:scale(2);
  }

JS

$(document).ready(function () {
    $('#s6').cycle({
        fx: 'shuffle',
        shuffle: {
            top: -50,
            left: 395
        },
        easing: 'easeOutBack',
        delay: -1000,
        speed: 700,
        timeout: 1000,
        next: '#forward',
        prev: '#rewind',
        pause: 0
    }).cycle('pause').hover(function () {
        $(this).cycle('resume');
    }, function () {
        $(this).cycle('pause');
    });
});
于 2013-01-31T05:04:30.707 に答える