CODEWITHSUNDEEP
javascriptjquerymouseevent
Javysk
Javysk

Reputation: 391

How I can use mouse events with Jquery

I'm tryng to configure the list of users in a chat adding the function slide something like this http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_down Similar facebook, when mouse is over focus, the chat container is slowly hidden

I'm using jquery-1.8.1.min.js in the proyect and have the principal container with a id and i can configure those events like 

$("mainContainer").someEvent(function () {
code...
}

I can use click, but i haven't mouse event when I put cursor inside for example.

I need .mousedown(), .mouseleave(), .mousemove(), hover(), etc. Need I use another library JS?

I wish something like this, think the green box is the container with list of users in chat 

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script> 
$(document).ready(function(){
    $("div").mouseenter(function(){
        $("div").animate({        
            width: '+=100px'
        });
    });
  $("div").mouseout(function(){
        $("div").animate({        
            width: '-=100px'
        });
    });
});
</script> 
</head>
<body>
<div style="background:#98bf21;height:100px;width:50px;position:fixed;right:0px;">
User1<br/>
User2<br/>
User3<br/>
User4<br/>
</div>
</body>
</html>

Upvotes: 0

Views: 122

Answers (5)

Daniel Cardoso
Daniel Cardoso

Reputation: 478

You could use it like this, by calling the same function for multiple events:

$("mainContainer").on('click mouseenter',function (event) {
    //This gives you what event happened, might be 'click' or 'mouseenter'
    var type = event.type;     
});

Upvotes: 0

Abhishekh Gupta
Abhishekh Gupta

Reputation: 6236

You can try this and can use any other mouse events according to your need:

$("#mainContainer").on('hover', function(){
      $(selector).slideDown("slow");
  }), function(){
      $(selector).slideUp("slow");
  });

Upvotes: 1

jollelj
jollelj

Reputation: 1030

Maybe something like this? You might not need any JavaScript for the mouseover effect. 

#mainConatiner {
  width: 300px;
  height: 30px;
  border: 1px solid #000;
}
ul {
  opacity: 0;
  transition: opacity 250ms ease;
}
#mainContainer:hover ul {
  opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainContainer">
  Hover me!
  <ul>
    <li>User 1</li>
    <li>User 2</li>
  </ul>
</div>

Let me know if it helps! Good luck.

Upvotes: 1

Clyff
Clyff

Reputation: 4076

Check http://api.jquery.com/on/

You could do something like this:

$("body").on({
    click: function() {
        //...
    }
    mouseleave: function() {
    //...
    },
    //other event, etc
}, "#yourthing");

Upvotes: 1

Ben Thomas
Ben Thomas

Reputation: 3200

JQuery has mouse based events. See here.

See this fiddle where I have adapted the w3schools example to work on mouseenter and mouseleave

Upvotes: 0

Related Questions