WordPress-jQuery-easeOutBounce无法正常工作

Question

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.learningjquery.com/js/jquery-1.7.1.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js">    
</script>
<script>
$(document).ready(function(){
$('.homeslider, #left, #right').hover(function(){
    $('.slidercaptions').animate({"height": "47px", "padding-top": "25px"}, {duration: 10, easing: 'easeOutBounce'});
            }, function(){
            $('.slidercaptions').animate({"height": "0", "padding-top": "0"},     10);
        })
    })
</script>

Once hover in .homeslider element .slidercaptions should gain height and bounce. I don't know what I'm doing wrong. Any clue would be appreciated. Thanks

PS I also included Easing plugin.

<?php
wp_enqueue_script( 'easing' );
wp_enqueue_script( 'jquery-easing', get_template_directory_uri() . '/js/jquery.easing.1.3.js', false);
?>

Answer 1

You may use jquery-effects-core

function load_scripts() {
    wp_enqueue_script('jquery');
    wp_enqueue_script("jquery-effects-core");
}
add_action( 'wp_enqueue_scripts', 'load_scripts' );

It'll load the WP 's standard script and it contains the easing functionality. Use wp_enqueue_script to load scripts, this is the proper way to add scripts in WP , also you have multiple versions of jQuery linked.

Answer 2

@Sheikh Heera - Thanks, I found my mistake, i was looking in the wrong file. I forgot to remove my first style set for .slidercaptions in css file. Transitions should be removed.

.slidercaptions{
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s easen-out;
    -ms-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    transition: all 1s ease-out;

}