Jump to content

Welcome to Geeks to Go - Register now for FREE

Need help with your computer or device? Want to learn new tech skills? You're in the right place!
Geeks to Go is a friendly community of tech experts who can solve any problem you have. Just create a free account and post your question. Our volunteers will reply quickly and guide you through the steps. Don't let tech troubles stop you. Join Geeks to Go now and get the support you need!

How it Works Create Account
Photo

Animation pause on mouse hover and stop on click


  • Please log in to reply

#1
gafaysto

gafaysto

    New Member

  • Member
  • Pip
  • 1 posts
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 , 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 and 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


Code:



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


Code:

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

Edited by gafaysto, 25 February 2012 - 08:16 AM.

  • 0

Advertisements


#2
Ax238

Ax238

    Tech Staff

  • Technician
  • 1,323 posts
Hi and welcome to Geeks to Go!

Your page link was most helpful, I just skimmed the code you posted, but it's best to be able to see the real thing, so thanks for that. You may want to check out the cycle plugin options, there's built-in functionality to do what you want:
Cycle Plugin Options

I believe the "pause" option is what you are looking for.

Regards,

Ax
  • 0






Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP