функция зависания со шкалой jquery

Question

Я не могу понять, что здесь не так.

Я сделал эту скрипку: http://jsfiddle.net/iBertel/dyNxs/

Это решается путем добавления транзитного сценария для JQuery. Вы можете скачать ее здесь: http://ricostacruz.com/jquery.transit/

HTML

<section class="slider-panel red-background"> 
    <div class="slider-caption-wrap"> 
     <div class="rollOver"> <span class="rollOverSymbol">x</span> 
    <span class="rollOverSymbolBG"></span> 

     </div> 
    </div> 
</section> 

CSS

.slider-caption-wrap { 
    background-color: #333; 
    width:20%; 
    height: 20%; 
    position: absolute; 
    overflow: hidden; 
    bottom: 15%; 
    left:15%; 
} 
.rollOver { 
    position: absolute; 
    z-index: 5; 
    width: 100%; 
    height: 100%; 
    background: url("../img/overlayDottyDark.png") repeat scroll 0px 0px rgba(200, 57, 59, 0.8); 
    overflow: hidden; 
    opacity: 0; 
} 
.rollOverSymbol { 
    position: absolute; 
    z-index: 5; 
    left: 50%; 
    top: 50%; 
    margin-left: -50px; 
    margin-top: -50px; 
    display: block; 
    height: 100px; 
    width: 100px; 
    background-color: rgb(148, 41, 43); 
    border-radius: 50% 50% 50% 50%; 
    text-align: center; 
    line-height: 100px; 
    font-size: 72px; 
    color: rgb(255, 255, 255); 
} 
.rollOverSymbolBG { 
    position: absolute; 
    z-index: 4; 
    left: 50%; 
    top: 50%; 
    margin-left: -60px; 
    margin-top: -60px; 
    display: block; 
    height: 120px; 
    width: 120px; 
    background-color: rgb(204, 72, 75); 
    border-radius: 50% 50% 50% 50%; 
} 

Jquery

$(".slider-caption-wrap").hover(

function() { 
    $(".rollOver", this).css({ 
     opacity: 1 
    }); 
    $(".rollOverSymbolBG", this).stop().transition({ 
     scale: 1 
    }, 1400, 'easeOutCirc'); 
    $(".rollOverSymbol", this).stop().transition({ 
     scale: 1, 
     rotate: '0deg' 
    }, 500, 'easeOutCirc'); 
}, 

function() { 
    $(".rollOverSymbolBG", this).stop().transition({ 
     scale: 4 
    }, 600, 'easeOutCirc'); 
    $(".rollOverSymbol", this).stop().transition({ 
     scale: 2, 
     rotate: '-45deg' 
    }, 600, 'easeOutCirc'); 
    $(".rollOver", this).stop().transition({ 
     opacity: 0 
    }, 300); 
}); 

Answer 1

Я думаю, что вы havnt прикрепил jquery.transit.js файл скрипкой ...

Работа демо: - http://jsfiddle.net/dyNxs/2/