fadein - jQuery li with image fade in background (fade in class) -


I am currently using this code: 

  var gallery = $ ( 'Ul # Gallery') Children () .; $ (Gallery) Filter (': too'). (': Last'). Hover (function () {$ (this) .toggleClass ('next')});

I'm trying to fade this new square. Currently, it includes a & lt; Li> There is an image in it, not the background when the 'next' class is added, then it gives a background image when it gets over whether an image can fade in the new class without blink / fade ?

If you have jQueryUI installed, you feed by adding a duration One can enlarge the class. 

  $ (this) .toggleClass ('next', 500);

But as far as I know, there is no different opacity setting which only affects the background image. So if you want to fade in that, you will need to erase the whole element, as you said, not what you want.

If you really want to influence, then an option may already be a different element for the class you were giving, and fade in that element (with its background image).

Elements will need to have complete positioning so that it does not affect the rest of the content.

You will end up with something like this:

CSS: 

  li {status: relative; }. Background {width: 100%; Height: 100%; Background: orange; // This will be your background image instead of the location: absolute; Top: 0; Left: 0; } .content {status: relative; }

HTML: 

  & lt; Ul id = 'gallery' & gt; & Lt; Li & gt; & Lt; Div class = 'background' & gt; & Lt; / Div & gt; // Prepaid and Feed In & lt; Div class = 'content' & gt; Hi & lt; / Div & gt; & Lt; / Li & gt; & Lt; / Ul & gt;

jQuery:

Hover () Two works one when you mousecenter , other when you < Code> mouseleave .

// set ambiguity to 0 for all. Background element $ ('background.') .css ({opacity: 0}); 

  var gallery = $ ('ul # gallery'). Children (); Gallery. Filter (': too'). No (': last'). Hover (function {$ (this) .find ('background'). ({'Opacity': 1}, 500);}, function () {$ (this) .find ('background'). Chetan ({'opacity': 0}, 500);}); Edit  
  Edit:   
 FYI, you can change your selector to get what you want Without the call immediately,  .filter () , and so on. 
 
  var gallery = $ ('ul # gallery li: even here: no (: last)'); Gallery. Hover (...  
 
 
  Edit:  
 
 Link changed word and docs for the first sentence .

Comments

Post a Comment