jQuery effect will not repeat

After I hover over an img once, the effect wears off. I want my effects to continue after the first hover infinitely.

<?php query_posts('showposts=6&cat=-4'); ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); if ( $post->ID == $do_not_duplicate ) continue; update_post_caches($posts); ?>

<li class="show1">

<?php $thumb = get_post_meta($post->ID, 'thumb', true); ?>

<a href="#" title="Permanent Link to <?php the_title_attribute(); ?>" class="show"><?php echo$thumb; ?></a>

<div class="hide">

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

<?php the_excerpt(); ?>

<a class="view_project" href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">View Project ยป</a>
</div>
</li>

and the Javascript

<script type="text/javascript">
$(function() {
    $('li.show1').children('.hide').hide();

    $('li.show1').hover(function() {
    $(this).children('a.show').fadeOut('slow')
        .end().children('.hide').fadeIn('slow');
    }, function() {
    $(this).children('a.show').fadeIn('slow')
        .end().children('.hide').fadeOut('slow');
});
});
</script>

Answers


Your code is working just fine. I'm using FF 7.0.1. Maybe you are using a to old browser.


The problem is with the :hover effects in the CSS code. By changing out the CSS for some more simplistic declarations, I was able to get a working fiddle.

Also, I don't think you need to hide/show the .show element at all; removing this did not change the behavior in any way.

So, here is what to do:

  • remove all the :hover declarations related to .show/.hide
  • remove the js fadeIn/fadeOut for .show?
  • use display:none for .hide (see my fiddle) to keep it initially hidden

And you'll have a working fade! ;)


Need Your Help

C# Error With A progress bar showing progress of a download and ran file from the internet

c# progress-bar runtime-error webclient

Okay so i am new to programming and i wanted to make a toolstrip with a progress bar that would show the progress of a file fetched from the internet and opened up, here is the code snipplet

Find 1st and last 20 character after particular keyword from database?

mysql

I want to find first and last 20 character after the particular keyword from database.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.