jQuery Forum

You have eliminated your document ready handler, so none of your jQuery functions will work. In addition the events mousedown and hover will not work together. What effect are you trying to achieve?

If you want to do fade in/out by clicking then you can do it like

1. $(function(){
2.     $('#div').on('click', function(){
3.         if($('#div1').is(':visible')){
4.             $('#div2').fadeIn(1000);
5.             $('#div1').fadeOut(1000);
6.         } else {
7.             $('#div1').fadeIn(1000);
8.             $('#div2').fadeOut(1000);
9.         }
10.     });
11. });

hello, it does not work, only hover works:

1. $(document).ready(function(){
       $('#div').hover(function(){
           $('#div2').fadeIn(1000);
           $('#div1').fadeOut(1000);
       },function(){
           $('#div2').fadeOut(1000);
           $('#div1').fadeIn(1000);
       })
   });

It should work. Share a link to see it with or create a sample page on plnkr.co    or  jsfiddle.net

See this demo http://jsfiddle.net/aohy1nv9/

ok, i combined the 2 functions and now i achieve what i want, i realized, i don't need the main div.

 is this right, from jQuery-syntax point of view? because someone said in a forum, you cannot combine click with hover , but i have now 2 different functions. here the jsfiddle:

https://jsfiddle.net/4ufv3ytL/

1. $(function(){
       $('#div1').on('click', function(){
           if($('#div1').is(':visible')){
               $('#div2').fadeIn(1000);
               $('#div1').fadeOut(1000);
           } else {
               $('#div1').fadeIn(1000);
               $('#div2').fadeOut(1000);   
      }
    });
   });
   
   $(function(){
       $('#div2').mouseleave(function(){
           $('#div2').fadeOut(1000);
           $('#div1').fadeIn(1000);
       })
   });

and the html like you had it, i changed a bit the css:

1. <div id="div1">1st div</div>
   <div id="div2" class="hide">2nd div</div>

on the website i got the error: TypeError: $(...).on is not a function because the .jquerytools have also an older jquery...now it is working...thanks a lot...

i still have 2 questions, how can i have a delay for the hover effect? and the second: if div1 is an image, does it work the same, or do i have to change something?

Instead of $ you need to use jQuery keyword for all your jQuery code.

There are various ways to handle conflicts in jQuery.

Read this jQuery noConflict | jQuery API Documentation

i tried something out and got the delay effect, but is this right? actually, if i move the mouse out for 1s and then i come back on div2, i want it to stay, but it fades away after 3000ms...so how can i make it stay if i got out and in again?

https://jsfiddle.net/kL1tfwyf/

1. $(function(){
       $('#div1').on('click', function(){
           if($('#div1').is(':visible')){
               $('#div2').fadeIn(1000);
               $('#div1').fadeOut(1000);
           } else {
               $('#div1').fadeIn(1000);
               $('#div2').fadeOut(1000);  
      }
    });
   });
   
   $(function(){
       $('#div2').mouseleave(function(){
           setTimeout(function() {$('#div2').fadeOut(1000)}, 3000);
           $('#div1').fadeIn(1000);
          
       })
   });