PDA

View Full Version : Animation pause on mouse hover and stop on click



gafaysto
02-25-2012, 11:54 AM
Hi guys , I'm trying to get an animation to pause on mouse hover and resume on mouse out and if is possible to pause for x seconds on mouse click or to stop completely and resume on refresh. I have this slider (http://test2.succesreal.info/) , the part where i can turn off the animation or set it to auto i got fixed . But i can put a video in there as you can see but if the animation is set to cycle if i play the video it goes away and that pretty much make the video useless. How can i make it to pause on mouse hover and to pause for x seconds if i click the video?

Here is the javascript



jQuery.noConflict();

jQuery(document).ready(function(){
var et_theme_folder = jQuery("meta[name=et_theme_folder]").attr('content'),
$et_top_menu = jQuery('ul#top-menu > li > ul'),
et_disable_toptier = jQuery("meta[name=et_disable_toptier]").attr('content');

jQuery('ul.nav').superfish({
delay: 200, // one second delay on mouseout
animation: {opacity:'show',height:'show'}, // fade-in and slide-down animation
speed: 'fast', // faster animation speed
autoArrows: true, // disable generation of arrow mark-up
dropShadows: false // disable drop shadows
});

if ( $et_top_menu.length ){
$et_top_menu.prepend('<li class="menu-gradient"></li>');
}

var $featured_content = jQuery('#featured #slides'),
et_featured_slider_auto = jQuery("meta[name=et_featured_slider_auto]").attr('content'),
et_featured_auto_speed = jQuery("meta[name=et_featured_auto_speed]").attr('content');

if ($featured_content.length){
var et_featured_options = {
timeout: 0,
speed: 500,
cleartypeNoBg: true,
prev: '#featured a#featured-left',
next: '#featured a#featured-right',
pager: '#controllers'
}
if ( et_featured_slider_auto == 1 ) et_featured_options.timeout = et_featured_auto_speed;

$featured_content.cycle( et_featured_options );
}

var $et_media_slider = jQuery('#media-slider');
if ( $et_media_slider.length ){
$et_media_slider.cycle( {
timeout: 0,
speed: 500,
cleartypeNoBg: true,
prev: '.recent-inner a#media-left',
next: '.recent-inner a#media-right'
} );
}

var $et_media_thumb = jQuery('.media-thumb');
$et_media_thumb.hover(function(){
jQuery(this).find('img').fadeTo('fast', 0.8);
jQuery(this).find('.more,.zoom').fadeTo('fast', 1);
}, function(){
jQuery(this).find('img').fadeTo('fast', 1);
jQuery(this).find('.more,.zoom').fadeTo('fast', 0);
});

var $footer_widget = jQuery("#footer-widgets .footer-widget");
if ( $footer_widget.length ) {
$footer_widget.each(function (index, domEle) {
if ((index+1)%3 == 0) jQuery(domEle).addClass("last").after("<div class='clear'></div>");
});
}

et_search_bar();

function et_search_bar(){
var $searchform = jQuery('#search-form'),
$searchinput = $searchform.find("input#searchinput"),
searchvalue = $searchinput.val();

$searchinput.focus(function(){
if (jQuery(this).val() === searchvalue) jQuery(this).val("");
}).blur(function(){
if (jQuery(this).val() === "") jQuery(this).val(searchvalue);
});
}

if ( et_disable_toptier == 1 ) jQuery("ul.nav > li > ul").prev("a").attr("href","#");

var $comment_form = jQuery('form#commentform');
$comment_form.find('input, textarea').focus(function(){
if (jQuery(this).val() === jQuery(this).next('label').text()) jQuery(this).val("");
}).blur(function(){
if (jQuery(this).val() === "") jQuery(this).val( jQuery(this).next('label').text() );
});

$comment_form.find('input#submit').click(function(){
if (jQuery("input#url").val() === jQuery("input#url").next('label').text()) jQuery("input#url").val("");
});
});



And here is the php for the slider, if it is of any help



<!-- Start Featured -->
<div id="featured">
<div id="slides">
<?php
global $wp_embed, $ids;

$ids = array();
$arr = array();
$i=1;

$featured_cat = get_option('feather_feat_cat');
$featured_num = get_option('feather_featured_num');

if (get_option('feather_use_pages') == 'false') query_posts("showposts=$featured_num&cat=".get_catId($featured_cat));
else {
global $pages_number;

if (get_option('feather_feat_pages') <> '') $featured_num = count(get_option('feather_feat_pages'));
else $featured_num = $pages_number;

query_posts(array
('post_type' => 'page',
'orderby' => 'menu_order',
'order' => 'ASC',
'post__in' => (array) get_option('feather_feat_pages'),
'showposts' => (int) $featured_num)
);
}

while (have_posts()) : the_post();
$et_feather_settings = maybe_unserialize( get_post_meta($post->ID,'et_feather_settings',true) );

$variation = isset( $et_feather_settings['et_fs_variation'] ) ? (int) $et_feather_settings['et_fs_variation'] : 1;
$link = isset( $et_feather_settings['et_fs_link'] ) && !empty($et_feather_settings['et_fs_link']) ? $et_feather_settings['et_fs_link'] : get_permalink();
$title = isset( $et_feather_settings['et_fs_title'] ) && !empty($et_feather_settings['et_fs_title']) ? $et_feather_settings['et_fs_title'] : get_the_title();
$description = isset( $et_feather_settings['et_fs_description'] ) && !empty($et_feather_settings['et_fs_description']) ? $et_feather_settings['et_fs_description'] : truncate_post(450,false);
$video = isset( $et_feather_settings['et_fs_video'] ) && !empty($et_feather_settings['et_fs_video']) ? $et_feather_settings['et_fs_video'] : '';
$video_manual_embed = isset( $et_feather_settings['et_fs_video_embed'] ) && !empty($et_feather_settings['et_fs_video_embed']) ? $et_feather_settings['et_fs_video_embed'] : '';

$additional_class = ' ';
$width = 396;
$height = 233;

switch ($variation) {
case 2:
$additional_class .= 'pngimage';
$width = 396;
$height = 233;
break;
case 3:
$additional_class .= 'description-left';
break;
case 4:
$additional_class .= 'description-center';
break;
case 5:
$additional_class .= 'full-image';
$width = 812;
break;
}
?>
<div class="slide clearfix<?php echo esc_attr($additional_class); ?>">

<?php if ($variation != 4) { ?>
<div class="featured-img">
<?php if ( $video == '' && $video_manual_embed == '' ) { ?>
<a href="<?php echo esc_url($link); ?>">
<?php $thumbnail = get_thumbnail($width,$height,'',$title,$title,false,'Featured');
$thumb = $thumbnail["thumb"];
print_thumbnail($thumb, $thumbnail["use_timthumb"], $title, $width, $height, ''); ?>

<?php if ( in_array($variation, array(1,3,5)) ) { ?>
<span class="overlay"></span>
<?php } ?>
</a>
<?php } else { ?>
<?php if ( $variation != 2 ) { ?>
<div class="video-slide">
<?php } ?>
<?php
if ( $video <> '' ) {
$video_embed = $wp_embed->shortcode( '', $video );
if ( $video_embed == '<a href="'.esc_url($video).'">'.esc_html($video).'</a>' ) $video_embed = $video_manual_embed;
} else {
$video_embed = $video_manual_embed;
}

$video_embed = preg_replace('/<embed /','<embed wmode="transparent" ',$video_embed);
$video_embed = preg_replace('/<\/object>/','<param name="wmode" value="transparent" /></object>',$video_embed);
$video_embed = preg_replace("/height=\"[0-9]*\"/", "height={$height}", $video_embed);
$video_embed = preg_replace("/width=\"[0-9]*\"/", "width={$width}", $video_embed);

echo $video_embed;
?>
<?php if ( $variation != 2 ) { ?>
</div> <!-- end .video-slide -->
<?php } ?>
<?php } ?>
</div> <!-- end .featured-img -->
<?php } ?>

<?php if ($variation != 5) { ?>
<div class="description">
<h2 class="title"><a href="<?php echo esc_url($link); ?>"><?php echo esc_html($title); ?></a></h2>

<p><?php if ( $variation == 4 ) echo '"'; ?><?php echo $description; ?><?php if ( $variation == 4 ) echo '"'; ?></p>
</div> <!-- end .description -->
<?php } ?>
</div> <!-- end .slide -->
<?php
$ids[]= $post->ID;
endwhile; wp_reset_query();
?>
</div> <!-- end #featured_content -->

<div id="controllers" class="clearfix"></div>

<a id="featured-left" href="#"><?php esc_html_e('Previous','Feather'); ?></a>
<a id="featured-right" href="#"><?php esc_html_e('Next','Feather'); ?></a>
</div> <!-- end #featured -->