Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works
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