Jquery fadeToggle doesn't work

Question

I need to fadeToggle some classes when I am hover on image. I am using Opencart.
Here is how it works https://i.stack.imgur.com/V7dCu.jpg
As you can see it works, but when I click to the List or Grid(top right) the effect is not working.
Jquery code:

$(document).ready(function(){
 $(".image").hover(function(){
  $(".wishlist, .compare").fadeToggle();
 });
});

HTML code:

 <div class="image">    
   <a href="<?php echo $product['href']; ?>">
    <img src="<?php echo   $product['thumb']; ?>" title="<?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>" />
   </a>
    <div class="wishlist" style="display: none;"style="display: none;"><a onclick="addToWishList('<?php echo $product['product_id']; ?>');"><i class="ebenicon ebenicon-plus-square"></i><?php echo $button_wishlist; ?></a></div>
  <div class="compare" style="display: none;">
    <a onclick="addToCompare('<?php echo    $product['product_id']; ?>');">
   <i class="ebenicon ebenicon-plus-square"></i><?php echo $button_compare; ?></a></div>
  </div>

score 1 · Answer 1 · answered Feb 28 '14 at 11:34

Just a wild guess, but I assume you want to have your image 'fadeOut' when you hover?

Do you necessarily want to use jQuery, as I can imagine you can simply CSS for this. Although, I do not see any problems in your code.. Anyway, try one of these examples below.

.image:hover > .wishlist, .image:hover > .compare {
    filter: alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

If you really want to use jQuery, try this.

$( ".image" ).mouseOver(function() {
  $(this).find(".compare").fadeTo( "slow" , 0.5, function() {
  $(this).find(".wishlist").fadeTo( "slow" , 0.5, function() {
    // fading complete.
  });
});
$( ".image" ).mouseOut(function() {
  $(this).find(".compare").fadeTo( "fast" , 1.0, function() {
  $(this).find(".wishlist").fadeTo( "fast" , 1.0, function() {
    // back to normal.
  });
});

Correct me if i'm wrong, but this should fade .wishlist and .compare to 50% opacity.

No, still it doesn't work. `.wishlist` and `.compare` are still shown. — ViktorR, Feb 28 '14 at 19:19
With those pieces of code added, could you please check what the developer console in Chrome reports? What bugs there are? — Sander Schaeffer, Feb 28 '14 at 19:39

score 1 · Answer 2 · edited May 23 '17 at 10:31

1

the reason being when you click on List/Grid some html is regenerated(replaced) by js function display() around line 112 in category.tpl

so in this function you got if else conditional block for list or grid view, so it regenerates some html including compare and wishlist div at around line 119 and 183, so you need to add style="display:none" there also

change this (in both if and else)

html += '<div class="wishlist">' + $(element).find('.wishlist').html() + '</div>';
html += '<div class="compare">' + $(element).find('.compare').html() + '</div>';

to

html += '<div style="display:none" class="wishlist">' + $(element).find('.wishlist').html() + '</div>';
html += '<div style="display:none" class="compare">' + $(element).find('.compare').html() + '</div>';

also why are you adding style="display:none" two times in wishlist div ?

-- Edit

one more error, to make hover on dynamically created element you have to use it little differently, also hover is deprecated so use on like this

$(document).ready(function(){
 $(document).on('hover','.image',function(){
  $(".wishlist, .compare").fadeToggle();
 });
});

reference : jQuery .on function for future elements, as .live is deprecated

edited May 23 '17 at 10:31

Community

1
1

answered Feb 28 '14 at 11:53

Chetan Paliwal

1,620
2
15
24

That was mistake, but still it doesn't work(when I corrected that mistake). Before I click on `List` or `Grid` it works, but when I click on `List` the `.wishlist` and `.compare` are shown no fadeToggle(). – ViktorR Feb 28 '14 at 19:24
@ViktorR have you added the code i gave you above ? – Chetan Paliwal Feb 28 '14 at 19:32
Yes, I have to the both(`List/Grid`) – ViktorR Feb 28 '14 at 19:36
@ViktorR i can't understand what you mean to say. your css was already messed up as one can see from your earlier gif in the question. if you apply these changes to a fresh default theme they work fine. whatever weird is happening is due to your messed up styling like add to cart button flying somewhere etc. – Chetan Paliwal Mar 01 '14 at 18:10

Jquery fadeToggle doesn't work

2 Answers2