I've accomplish successfully when the mouse overs a div to cycle and change the background-image and stop the other divs from cycle.
What happens is that, this div have a title which appears when the mouse is hovering the div, and if I grab the cursor and put it over the title and then move the cursor again to the other div title, the cycle continues in both divs, and I would like not to.
I'm clearing the interval cycle this way: clearInterval(theInterval);
But, somehow, when the title is being hovered it doesn't stop the others cycle.
The problem can be seen in JSFiddle.
Simulate the problem:
Put your cursor over the title
Move your cursor quickly to the other div title
You'll see that both divs continue the cycle independently (and I want only one to cycle)
Simulate how it works:
Put your cursor over the div (without being in the title)
Move your cursor to the other div
You'll see that only one div cycles
I believe it's a problem with the nature of the mouseover event, and the divs being in such close proximity. Try using the hover event instead. See this fiddle
In essence:
$('.collection-photo').hover(function(){
// mouse over stuff here
}, function() {
// mouse out stuff here
});
Related
I set up a code that have this traits:
the navigation Items-texts- are hidden behind the some Divs I'll call them Navigation Divs
when the mouse move over the some of pixels-navigation Divs-, the text that they are behind this, slide right and left and in some cases, some of them move top and bottom about 15 px with animate() method...
when the mouse move to another Div, other text will be reset to first position
for next action and I did this with:
$(document).on('mouseover', '.pixel#p18', function(){
$('.submenus').not("this Div's TEXT").fadeOut('fast').removeAttr('style');
});/* this Div's Text is for Example*/
and I wrote this kind for all of my navigation texts..
Now my problem is:
When I hover mouse on one of navigation Divs, some of the texts that they did not animated, become to visible because of removeAttr('style')!!! But I don't want that...
is there any alternative way that I can slide the texts or other elements to left, right, top and down with optional values of move...??? for example 23px to left or 17px to top... etc???- I'm familiyar with slideUp and Down and toggle but not sure that they are good enough for my code...
Do you have some better Idea for this---that actualy you'll have because I think this is very bad
and the last Question is that why my codes are very slow in running? the animations that I wrote have lak some times and I'm not Sure that the problem is my selector or other stuff.
For this you need something like .animate which has a callback. So something like:
$('.submenus').not("this Div's TEXT").animate({opacity:0},500,'linear', function() {
$(this).removeAttr('style');
});
This will only remove the attribute when the animation is complete.
I'm trying to attach click events to a couple of divs. One of which has no height or width, just borders. Maybe it's just the browser, but the clicks are being triggered very unreliably. Even the css parameters .class:hover{} isn't really working.
$("body").on("click", "._tlh_dropdown, ._tlh_dropdown *", function (event) {
isn't working when the a div contained by ._tlh_dropdown is clicked. And the div ._tlh_dropdown_close_button is not removing it's parent div when clicked, nor turning a darker shade of gray when it is hovered over. What am I doing wrong here? I assume it has to do with the click event not being applied to the areas of the divs that are "just padding". Is this the case? How can I overcome this?
http://jsfiddle.net/UrNUM/7/
This is happening because the underline element that is a div element overlaps the elements in question . As you know div is a block level element.
One work around is to to set the 2 divs to inline-block
._tlh_dropdown_input_container, ._tlh_dropdown{
display: inline-block;
}
Check Fiddle for hover
If you want the div to be block level as it is then you can also play around with the z-index
._tlh_dropdown_close_button{
z-index: 1;
}
This will make sure the close div is always on top of the underlying container
UPDATE
2 events fire for every click event on the page..
So the content is not shown when u click on the image because of this condition
if ($targ.hasClass('_tlh_dropdown')
|| $targ.closest('._tlh_dropdown_content').length)
return;
This happens because the e.target when you click on the arrow image will be the arrow and not the tlh_dropdown .. So it fails on this condition and moves to the next statement where the content is removed.
Change it
if ($targ.hasClass('_tlh_dropdown')
|| $targ.closest('._tlh_dropdown').length
|| $targ.closest('._tlh_dropdown_content').length)
return;
It should work..
Check Fiddle
Also I feel the same can be accomplished with a lot less code. You can always have the HTML already built and then hide or show based on the condition.
Regarding the close button, if you hover "_tlh_dropdown_input_container" in the inspector, you can see that it overlaps the bottom part of the X button. That's why the hover/click event on the X is not caught below the middle of it.
Regarding the down arrow, just wrap it with another DIV on which you'll add the events. You can achieve minimal HTML by using a single DIV and adding the arrow to it using CSS :before or :after.
I want code in which a div fades out if mouse does not hover over it. This is the code which makes the div visible. As soon as it is displayed it fades out. I want that if a user hovers over it while it is fading out it stops fading and becoming as it was initially. And then as user hovers out of it it fades again.
$('#popuup_div').css({left:leftVal,top:topVal}).show().fadeOut(2000);
jQuery has a stop() function which stops all animations taking place on an element. Use it in a mouseover() event handler and you're done.
Check this fiddle. http://jsfiddle.net/6WMDz/1/
$('#popuup_div').on('mouseover', function() {
$(this).fadeIn();
});
I have used mouseover to fadeIn the div.
You can also use stop, but it is not resetting the display to initial state.
I have a menu system made up of divs and i want to animate the left property to slide each time the user mouses over a menu item but i need the outer div(which is black) element to expand as the menu items move left to right also I want the div element(.container) to slide back and contract the outer div element(this black div which is 0 width) I have a basic example done in jsFiddle it olny moves the elements to the left
Having a little trouble fully understanding, but is this sort of what you mean?
http://jsfiddle.net/V3RHr/2/
If I could rewrite your html a bit, I would put make each .menu-item into an unordered list.
When you mouseenter the unordered list, you expand the second container. Inside that mouseenter function, I would have a second event when you mouseenter a list item, you populate the second container and stopPropogation.
You could probably still do it with a mouseenter on the first container, and another mouseenter on the div.menu-item, but your first container has extra height and width.
You should be able to fix the left is null issue by having the code not execute on the last .content, like this:
$('.container').not(':last').find('.menu-item').mouseenter(function () {
This will not apply to the menu-items within the green box.
For the re-show issue, I would change the way you are showing. Instead of sliding the box out from behind the other, you can position it where you want it to end up and hide it, then you can use:
.animate({width: 'show'})
Which will give a similar sliding effect.
That, or do it similar to my response to your other question, only without the collapsing I had previously:
http://jsfiddle.net/V3RHr/3/
I am currently learning jQuery. I'd like to know how to make an image slide in when you click on its edge, then click again and it slides away. Similar to this:
http://www.karenmillen.com/
If you see the right hand side and click, there is the effect that i'm looking for. I assume this will involve making a div and giving it a background image then using some jquery to make the div slide into view. Of course the div could have other content such as html. Any ideas?
Would the .slideDown() method work?
if you want a div to slideDown() first it has to hidden.
so use $("#div_Id").hide();
after that use $("#div_Id").slideDown('slow');
this will work
Check out slideToggle
Here's what i have so far:
$(document).ready(function() {
$('.inner').hide();
$("button").click(function() {
$("#static_image").hide();
$('.inner').slideToggle(300);
});
});
So basically the animated div begins hidden. There's another div with a background image that is lined up to look as if the animated div is still sticking out a bit. Then clicking a button makes the static div dissapear and the animated div slide into view. However i'm not sure how to make the timing perfect so it's smooth and people won't know there are two divs. The animated div takes a fraction of a second to move up to where the div with the static image was, however the static images disappears immediately leaving a non-smooth animation.
One other thing, how do i get the static image div to return at the moment that the animated div moves back down after a user click? It can't be at the exact moment the user clicks 'retract' button else it'd definitely appear before it's supposed to.
In order to use the animate() function add a CSS class to the <div> tag that has a height attribute, it can either be in pixels or %, this will be the initial height. After that then you can use the animate().
$('#mydiv').animate({
height: 500px
}, 5000, function() {
// Animation complete.
});
This will slide the div to 500px, which will take 5 seconds.