i have a problem with this code (i made a jsfiddle http://jsfiddle.net/r2y8J/).
$(document).ready(function() {
/*$(".bulletProj").mouseenter(function () {
console.log("You're Over!");
$(".caption").animate(
{top: "0px"},
300, function() {
console.log("i slided");
});
});
$(".bulletProj").mouseleave(function() {
$(".caption").animate(
{top: "-200px"},
300, function() {
console.log("i left");
});
});*/
$(".bulletProj").mouseenter(function() {
console.log("mous is over");
$(".caption").toggle();
}).mouseleave(function () {
console.log("mous leaves");
$(".caption").toggle();
});
});
Part of the code is commented since I tried more ways.
What I want to do is to have a div with some text and a bg image, and when the mouse is over it another div should slideDown with a button. The problem is that I tried .mouseover .mouseout, .mouseeneter and .mouseleave but it keep flickering. I found that when i'm over the text it stops but if I am in a blank space of the div it continues flickering.
Anyone has an idea?
Thanks very much.
try this:
$(document).ready(function() {
$(".bulletProj,.caption").mouseenter(function() {
$(".caption").toggle();
}).mouseleave(function () {
$(".caption").hide();
});
});
working fiddle here: http://jsfiddle.net/r2y8J/4/
I hope it helps.
You can easily use
.caption{pointer-events:none}
http://jsfiddle.net/r2y8J/5/
Try this.
$(".bulletProj").mouseenter(function() {
console.log("mous is over");
$(".caption").toggle();
}).mouseleave(function () {
console.log("mous leaves");
stopImmediatePropagation();
$(".caption").toggle();
});
I have faced a similar problem, in my case i have used css: opacity like below to stop flickering
css:
.caption {
width: 300px;
height: 200px;
background-color: #69adf1;
position: absolute;
opacity:0;
}
JQuery:
$(".caption").mouseenter(function(){
$(this).css('opacity','1');
})
$(".bulletProj").mouseenter(function() {
console.log("mous is over");
$(".caption").css('opacity','1');
}).mouseleave(function () {
console.log("mous leaves");
$(".caption").css('opacity','0');
});
Working Fiddle
var caption = $(".caption");
$(".bulletWrapper").hover(function(){
console.log("mous is over");
caption.toggle();
}, function(){
console.log("mous leaves");
caption.toggle();
});
or
$(".bulletWrapper").bind("mouseenter mouseleave", function(){
$(".caption").toggle();
});
Related
https://jsfiddle.net/gmz73oew/
So I'm trying to make it so that on the click of the button the height of the div grows. I've got this animation working by itself smoothly but I'm having issues when I try to make it happen via clicking the button.
$(document).ready(function() {
$("#button1").click(function(){
$("#maBlock").animate({
height: "950px",
top: "0px",
}, 2000 );
});
}
Help is appreciated.
You need to add a bracket and a semicolon to the end, to close the ones that $(document).ready(function() { opened:
$(document).ready(function () {
$("#button1").click(function () {
$("#maBlock").animate({
height: "950px",
top: "0px",
}, 2000);
});
}); //here you need the ');'
There is a syntax error in your code
replace your js code below snippet of code
click here
$(document).ready(function() {
$("#button").click(function(){
$("#maBlock").animate({
height: "950px",
top: "0px",
}, 2000 );
});
});
You forgot bracket and semicolon in the last row
$(document).ready(function() {
alert('ciao');
$("#button1").click(function(){
$("#maBlock").animate({
height: "950px",
top: "0px",
}, 2000 );
});
});//<----- this
I have a div and I want to fire an event only after user continuous hovers his mouse for 3 sec. My code doesn't work well because it fires right after hover and doesn't "wait".
Code:
$(".inner_pic").mouseenter(function () {
setTimeout(function () {
alert('testing');
}, 3000);
}).mouseleave(function () {
alert('finish');
});
You need to store timeout id somewhere and clear it on mouseout. It's convenient to use data property to save this id:
$(".inner_pic").mouseenter(function () {
$(this).data('timeout', setTimeout(function () {
alert('testing');
}, 3000));
}).mouseleave(function () {
clearTimeout($(this).data('timeout'));
alert('finish');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inner_pic">PICTURE</div>
You can achieve this by delay option:
Working demo
$('#elem').popover({
trigger: "hover",
delay: {show : 3000, hide : 0} });
Checkout the below code
var myVar;
$( "div#container" )
.mouseover(function() {
myVar = setTimeout(function(){ alert("Hello"); }, 3000);
})
.mouseout(function() {
clearTimeout(myVar);
});
div {
background: red;
margin: 20px;
height: 100px;
width: 100px;
display:block;
cursor: pointer;
}
div:hover {
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>
var st;
$(".inner_pic").mouseenter(function(e) {
var that = this;
st = setTimeout(function() {
alert('testing');
}, 3000);
}).mouseleave(function() {
clearTimeout( st );
alert('finish');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inner_pic">
<h3>Picture Here - Hover me</h3>
</div>
Assuming you have a div with id of myelement, you can do this:
var divMouseOver;
$('#myelement').mouseover(function() {
divMouseOver = setTimeout(function() {
alert("3 seconds!"); //change this to your action
}, 3000);
});
$('#myelement').mouseout(function() {
if (divMouseOver) {
clearTimeout(divMouseOver);
}
});
BTW, tere's a helpful clarifying question re: using mouseenter and mouseover right here: Jquery mouseenter() vs mouseover(). Consider this when choosing which to use.
So I have this code
$(function () {
$(".one, .two, .three").click(function (event) {
event.preventDefault();
$("#" + $(this).attr("class")).fadeIn().siblings('.popup').hide();
return false;
});
$(".close").click(function (event) {
event.preventDefault();
$(".popup").fadeOut();
});
});
But I'm not quite sure how to animate it. What I want to do is when you click a link, the div fades in (it works), but when you click the related links, I don't want the box to fade out and in again (except for the texts inside it though).
Here's the fiddle
Thanks! x
Hope this works for you
$(function () {
$(".one, .two, .three").click(function (event) {
event.preventDefault();
$("#" + $(this).attr("class")).fadeIn(function(){
$(this).siblings('.popup').hide();
});
return false;
});
$(".close").click(function (event) {
event.preventDefault();
$(".popup").fadeOut();
});
});
Here is the updated fiddle
To get this to fade properly both ways I think you need to play with the z-index:
$(function () {
$(".one, .two, .three").click(function (event) {
event.preventDefault();
$("#" + $(this).attr("class")).css('z-index', 1).fadeIn(function(){
$(this).css('z-index', 0).siblings('.popup').hide();
});
return false;
});
$(".close").click(function (event) {
event.preventDefault();
$(".popup").fadeOut();
});
});
Here is the fiddle
this is what i have so far - i'm trying to get the text only to show when the 'timelineTile' is made bigger..
$(function () {
$('.timelineTile').click(function (evt) {
evt.stopPropagation();
$('.selected').children().not(this).removeClass('clicked');
$(this).toggleClass('clicked');
if($('.selected').children().hasClass("clicked")){
$('.details').addClass('show');
}
});
$(document).click(function () {
$('.timelineTile').removeClass('clicked');
$('.details').removeClass('show');
});
});
fiddle also
Add the following css as well to show text only when box is bigger
.timelineTile table{
display: none;
}
.timelineTile.clicked table{
display: block;
}
http://jsfiddle.net/devools/gjyksjuh/1/
try that fiddle?
$(function () {
$('.timelineTile').click(function (evt) {
evt.stopPropagation();
$('.selected').children().not(this).removeClass('clicked');
$(this).toggleClass('clicked');
if($('.selected').children().hasClass("clicked")){
$('.details').removeClass('show');
$(this).children('.details').addClass('show');
}
});
$(document).click(function () {
$('.timelineTile').removeClass('clicked');
$('.details').removeClass('show');
});
});
Hope you could check my code. Just want to animate. Toggle the top position of div tag with 'accordionHeader' class.
<script type="text/javascript">
$(document).ready(function() {
$(".accordionHeader").toggle(function() {
$(".accordionHeader").animate({"top": "0 144px"}, 500);
function(){
$(".accordionHeader").animate({"top": "144px 0"}, 500);
);
});
</script>
Thank you so much.
you mean:
$(document).ready(function(){
$(".accordionHeader").toggle(
function(){
$(".accordionHeader").animate({"top": "144px"}, 500);
},
function() {
$(".accordionHeader").animate({"top": "-144px"}, 500);
});
});
As an alternative, since jQuery.toggle() is deprecated, you could also do:
$(".accordionHeader").on("click", function() {
var clicked = $(this).data('clicked');
if (clicked) {
$(".accordionHeader").animate({"top": "144px"}, 500);
}
else {
$(".accordionHeader").animate({"top": "-144px"}, 500);
}
$(this).data("clicked", !clicked);
});
you can try this on click event
$('.accordionHeader').animate({ position: 'relative', top: '144px' }, 500);