Enlarge image on hover then start jquery cycle

Question

I am using the jQuery Cycle plugin with the shuffle effect. I would like to be able to enlarge the images on hover then start the slideshow with the larger images. I've tried CSS styling a few different ways but no luck yet. It seems I can get it to enlarge or I can get it to shuffle but not both.

Here is what I've got so far:

jsFiddle

<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>

Answer 1

You could try something like this:

$('#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() method will only fire once

API reference http://api.jquery.com/one/

Answer 2

I used a container div and set it to scale up when hovered and set the slideshow to play only when hovered over.

Working Example

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');
    });
});