www.webdeveloper.com
Results 1 to 15 of 15

Thread: Jquery fade new content into container

  1. #1
    Join Date
    Oct 2005
    Location
    UK
    Posts
    630

    Question Jquery fade new content into container

    I am currently trying to work with jquerys fadein/fadeout to do the following action:

    user mouseover link -> specified div content fades out -> content is replaced whilst hidden -> new content fades in

    user mouseout link -> specified div content fades out -> content is replaced to origional hidden -> new content fades in

    Code:
    $(".item1").mouseover(function() {
    	$("#detail-image").fadeOut("fast");
    	$("#detail-image").html('<img src="images/sample-product-detail.png" alt="" title=""/>');
    	$("#detail-image").fadeIn("slow");
    });
    $(".item1").mouseout(function() {
    	$("#detail-image").fadeOut("fast");
    	$("#detail-image").html('<img src="images/myimage.png" alt="myimage" title="myimage"/>');
    	$("#detail-image").fadeIn("slow");
    });
    HTML Code:
    <div id="detail-image">
    <img src="images/myimage.png" alt="myimage" title="myimage"/>
    </div>
    <a href="#" class="item1" id="item1">rolloverlink</a>
    thanks in advance

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,680
    I don't know much about jquery but this may be of interest

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <style type="text/css">
    <!--
    #detail-image{
      position:relative;width:100px;height:100px;
    }
    
    #detail-image IMG{
      position:absolute;left:0px;top:0px;width:100%;height:100%;
    }
    
    -->
    </style>
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    // Basic Element Animator (11-October-2008) DRAFT
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    // To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
    
    // **** Application Notes
    
    // **** The HTML Code
    //
    // when moving an element the inline or class rule style position of the element should be assigned as
    // 'position:relative;' or 'position:absolute;'
    //
    // The element would normally be assigned a unique ID name.
    //
    
    // **** Executing the Effect(Script)
    //
    // The effect is executed by an event call to function 'zxcBAnimator('left','tst1',20,260,2000);'
    // where:
    // parameter 0 = the mode(see Note 1).                                                                     (string)
    // parameter 1 = the unique ID name or element object.                                                     (string or element object)
    // parameter 2 = the start position of the effect.                                                         (digits, for opacity minimum 0, maximum 100)
    // parameter 3 = the finish position of the effect.                                                        (digits, for opacity minimum 0, maximum 100)
    // parameter 4 = (optional) period of time between the start and finish of the effect in milliseconds.     (digits or defaults to 2000 milliSeconds)
    //
    //  Note 1:  The default units(excepting opacity) are 'px'.
    //  Note 2:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
    //           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
    //  Note 3:  To 'toggle' the effect include '#' in parameter 0.
    //           The first call will set the toggle parameters.
    //           Subsequent calls with '#' in parameter 0 and the same start and finish parameters will 'toggle' the effect.
    //  Note 4:  The function may be re-executed with a different set of parameters (start/finish time or period)
    //           whenever required, say from an onclick/mouseover/out event.
    //           The period parameter will be retained unless re-specified.
    //
    // **** Advanced Applications
    //
    //  It may be required to access the current value of the effect.
    //  The element effect is accessible from the element property
    //  element effect = elementobject[mode.replace(/[-#]/g,'')+'oop'];
    //  where mode is parameter 0 of the initial call.
    //  An array storing the current, start and finish values of the element effect may be accessed
    //  from the element effect.data as fields 0, 1 and 2 respectively
    //
    
    // **** General
    //
    // All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts.
    // These characters may be changed to characters of choice using global find and replace.
    //
    // The Functional Code(about 2K) is best as an External JavaScript.
    //
    // Tested with IE7 and Mozilla FireFox on a PC.
    //
    
    
    
    // **** Functional Code - NO NEED to Change
    
    
    function zxcBAnimator(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime){
     if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
     if (!zxcobj||(!zxcsrt&&!zxcfin)||zxcsrt==zxcfin) return;
     var zxcoop=zxcobj[zxcmde.replace(/[-#]/g,'')+'oop'];
     if (zxcoop){
      clearTimeout(zxcoop.to);
      if (zxcoop.srtfin[0]==zxcsrt&&zxcoop.srtfin[1]==zxcfin&&zxcmde.match('#')) zxcoop.update([zxcoop.data[0],(zxcoop.srtfin[0]==zxcoop.data[2])?zxcfin:zxcsrt],zxctime);
      else zxcoop.update([zxcsrt,zxcfin],zxctime);
     }
     else zxcobj[zxcmde.replace(/[-#]/g,'')+'oop']=new zxcBAnimatorOOP(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime);
    }
    
    function zxcBAnimatorOOP(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime){
     this.srtfin=[zxcsrt,zxcfin];
     this.to=null;
     this.obj=zxcobj;
     this.mde=zxcmde.replace(/[-#]/g,'');
     this.update([zxcsrt,zxcfin],zxctime);
    }
    
    zxcBAnimatorOOP.prototype.update=function(zxcsrtfin,zxctime){
     this.time=zxctime||this.time||2000;
     this.data=[zxcsrtfin[0],zxcsrtfin[0],zxcsrtfin[1]];
     this.srttime=new Date().getTime();
     this.cng();
    }
    
    zxcBAnimatorOOP.prototype.cng=function(){
     var zxcms=new Date().getTime()-this.srttime;
     this.data[0]=(this.data[2]-this.data[1])/this.time*zxcms+this.data[1];
     if (this.mde!='left'&&this.mde!='top'&&this.data[0]<0) this.data[0]=0;
     if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
     else  zxcOpacity(this.obj,this.data[0]);
     if (zxcms<this.time) this.to=setTimeout(function(zxcoop){return function(){zxcoop.cng();}}(this),10);
     else {
      this.data[0]=this.data[2];
      if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
      else zxcOpacity(this.obj,this.data[0]);
     }
    }
    
    function zxcOpacity(zxcobj,zxcopc){
     if (zxcopc<0||zxcopc>100) return;
     zxcobj.style.filter='alpha(opacity='+zxcopc+')';
     zxcobj.style.opacity=zxcobj.style.MozOpacity=zxcobj.style.KhtmlOpacity=zxcopc/100-.001;
    }
    
    /*]]>*/
    </script>
    <script language="JavaScript" type="text/javascript">
    <!--
    
    function zxcFade(zxcid,zxcspd){
     var zxcevt=window.event||arguments.callee.caller.arguments[0];
     var zxcp=document.getElementById(zxcid);
     if (!zxcp.imgs){
      zxcp.imgs=zxcp.getElementsByTagName('IMG');
      zxcOpacity(zxcp.imgs[0],0);
     }
     zxcp.imgs[0].style.zIndex=zxcevt.type=='mouseover'?'2':'0';
     zxcBAnimator('opacity#',zxcp.imgs[1],100,0,zxcspd);
     zxcBAnimator('opacity#',zxcp.imgs[0],0,100,zxcspd);
    }
    
    
    //-->
    </script>
    
    </head>
    
    <body>
    <div id="detail-image" >
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="myimage" title="myimage"/>
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" alt="myimage" title="myimage" style="left:0px;" />
    </div>
    <input type="button" name="" value="TEST" onmouseover="zxcFade('detail-image',1000);" onmouseout="zxcFade('detail-image',500);">
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Jul 2003
    Location
    The City of Roses
    Posts
    2,503
    knowj, the problem is that fadeOut happens asynchronously. That means the next two jQuery calls are executed before the fade out has finished. The fadeOut function, however, takes a callback parameter to be executed when the fadeOut has finished. So your code will need to be like this.

    Edit: Also, don't forget to wait for the document to be ready before you run any of this.

    Code:
    $(document).ready(function(){
    	$(".item1").mouseover(function() {
    		$("#detail-image").fadeOut("fast", function(){
    			$("#detail-image").html('<img src="images/sample-product-detail.png" alt="" title=""/>');
    			$("#detail-image").fadeIn("slow");
    		});
    	});
    	$(".item1").mouseout(function() {
    		$("#detail-image").fadeOut("fast", function(){
    			$("#detail-image").html('<img src="images/myimage.png" alt="myimage" title="myimage"/>');
    			$("#detail-image").fadeIn("slow");
    		});
    	});
    });
    Last edited by Jeff Mott; 10-14-2008 at 10:46 AM.
    for(split(//,'))*))91:+9.*4:1A1+9,1))2*:..)))2*:31.-1)4131)1))2*:3)"'))
    {for(ord){$i+=$_&7;grep(vec($s,$i++,1)=1,1..($_>>3)-4);}}print"$s\n";

  4. #4
    Join Date
    Oct 2005
    Location
    UK
    Posts
    630
    That's brilliant thanks your a star. Javascript and PHP development are a whole different ball game i understand the syntax just working out the physics.

    I have multiple mouseover classes (item1, item2, item3 etc...) if a user rolls from one to the next it get stuck in the mouseout/previous fade. If there any way of calling a stop function or a way of handling this so it starts to fade in the new state rather than getting stuck between states.

    thanks for the help i greatly appreciate it an hopefully will be able to understand the physics of jquery/javascript before long and wont be asking stupid questions.

  5. #5
    Join Date
    Oct 2005
    Location
    UK
    Posts
    630
    *bump*

  6. #6
    Join Date
    Jul 2003
    Location
    The City of Roses
    Posts
    2,503
    Please link to the actual page so we may see what's going on.
    for(split(//,'))*))91:+9.*4:1A1+9,1))2*:..)))2*:31.-1)4131)1))2*:3)"'))
    {for(ord){$i+=$_&7;grep(vec($s,$i++,1)=1,1..($_>>3)-4);}}print"$s\n";

  7. #7
    Join Date
    Oct 2005
    Location
    UK
    Posts
    630
    This is an example of what im getting
    http://www.knowj.com/imageswap/detail.html]

    you need to completely move your mouse off the rollovers to be able to view the next item otherwise it gets stuck somewhere between the mouseout and mouseover.

    again thanks for the help

  8. #8
    Join Date
    Oct 2005
    Location
    UK
    Posts
    630
    sorry i knocked ] onto the link -> http://www.knowj.com/imageswap/detail.html

  9. #9
    Join Date
    Oct 2005
    Location
    UK
    Posts
    630
    *bump*

  10. #10
    Join Date
    Sep 2008
    Posts
    13
    how can I create something similar with mouseclick event? I mean click on several links and change the source of the image with a fade effect?

    Can someone give me an idea?

  11. #11
    Join Date
    Oct 2005
    Location
    UK
    Posts
    630
    change mouseover to click:
    Code:
    $(document).ready(function(){
    	$(".item1").click(function() {
    		$("#detail-image").fadeOut("fast", function(){
    			$("#detail-image").html('<img src="images/sample-product-detail.png" alt="" title=""/>');
    			$("#detail-image").fadeIn("slow");
    		});
    	});
    	$(".item2").click(function() {
    		$("#detail-image").fadeOut("fast", function(){
    			$("#detail-image").html('<img src="images/myimage.png" alt="myimage" title="myimage"/>');
    			$("#detail-image").fadeIn("slow");
    		});
    	});
    });

    Anyone got any idea how to stop the javascript/browser from getting confused when the user scrolls from one image to the next:
    http://www.knowj.com/imageswap/detail.html

    It works fine if you mouseover then mouseout (away from the images) but if you move your mouse from one image to the next it get stuck in the mouseout effect.

  12. #12
    Join Date
    Sep 2008
    Posts
    13
    thank you so much
    it works great!

  13. #13
    Join Date
    Aug 2005
    Location
    The Garden State
    Posts
    5,634
    Quote Originally Posted by knowj View Post
    Anyone got any idea how to stop the javascript/browser from getting confused when the user scrolls from one image to the next:
    http://www.knowj.com/imageswap/detail.html

    It works fine if you mouseover then mouseout (away from the images) but if you move your mouse from one image to the next it get stuck in the mouseout effect.
    Maybe I'm not understanding you but what exactly do you mean by "stuck"?

    Edit: Nevermind, I see it now. I wonder if it would be acceptable to take out the mouse out? The reason I'm even suggesting it is because in any likely scenario I can think of, there would actually be 3 penguin thumbnails, not necessarily two.
    Last edited by chazzy; 10-16-2008 at 05:57 AM.
    Acceptable Use | SQL Forum FAQ | celery is tasteless | twitter

    celery is tasteless - currently needing some UI time

  14. #14
    Join Date
    Oct 2005
    Location
    UK
    Posts
    630
    There are up to 10 rollover images at any one time. The mouse out is pretty essential unless i set a mouseover on the large image that returns it to its previous state.

  15. #15
    Join Date
    Aug 2006
    Posts
    15
    Quote Originally Posted by Jeff Mott View Post
    knowj, the problem is that fadeOut happens asynchronously. That means the next two jQuery calls are executed before the fade out has finished. The fadeOut function, however, takes a callback parameter to be executed when the fadeOut has finished. So your code will need to be like this.

    Edit: Also, don't forget to wait for the document to be ready before you run any of this.

    Code:
    $(document).ready(function(){
    	$(".item1").mouseover(function() {
    		$("#detail-image").fadeOut("fast", function(){
    			$("#detail-image").html('<img src="images/sample-product-detail.png" alt="" title=""/>');
    			$("#detail-image").fadeIn("slow");
    		});
    	});
    	$(".item1").mouseout(function() {
    		$("#detail-image").fadeOut("fast", function(){
    			$("#detail-image").html('<img src="images/myimage.png" alt="myimage" title="myimage"/>');
    			$("#detail-image").fadeIn("slow");
    		});
    	});
    });
    I came across this while looking for a solution to the same problem and the resolution makes sense (I am just starting to learn jQuery). However, when I try to implement it the content does not fade in, so I must be doing something wrong.

    My code is:

    Code:
    <script type="text/javascript">
    var Tips = {
      ready: function() {
        $('ul#SiteNav li').mouseover(
          function() {
            $(this).find('div.SectionTitle').fadeOut('fast', function() {
              $(this).find('div.Explanation').fadeIn('slow');
            });
        });
        $('ul#SiteNav li').mouseout(
          function() {
            $(this).find('div.Explanation').hide();
            $(this).find('div.SectionTitle').show();
        })
      }
    };
    $(document).ready(Tips.ready);
    </script>

    I left the mouseout part unchanged, as that is an example of what I am changing from. What happens is that the mouseover text fades out, but the replaced text does not fade back in. This works fine with hide/show. Full code can be found at http://dripinvesting.org/Default_test.asp.

    I am apparently missing something basic, so a pointer to a beginner would be appreciated.

    Cheers -

    george

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles