So i have this little drop down arrow <div> that i want to move up when it's clicked, which works. But there's another animation on it which changes its opacity and uses the jQuery function .stop(). The problem is that whenever i hover over it during the sliding animation, the element stops dead in its tracks and doesn't finish the animation.
How do i solve this?
PS: if anyone has any suggestions on how to toggleclick two functions, i'd love to hear them, the one for hover seems a lot more convenient. Adding an attribute just for that is kind of lame.
EDIT: usable example: http://plnkr.co/edit/swuKbS3uM8G6stFnUT8U?p=preview
$(document).ready(function () {
console.log("ready for action!");
// Dropdown icon hover
$("#dropdownIcon").hover(function () {
$(this).stop(true).fadeTo(500, 1);
console.log("hovering");
}, function () {
$(this).stop(true).fadeTo(500, 0.3);
console.log("no longer hovering");
});
// Clicking on dropdown icon
$("#dropdownIcon").on("click", function () {
$(this).find("i").toggleClass("fa-chevron-down fa-chevron-up");
console.log("i clicked on the thing!");
if ($(this).attr("data-click-state") == 1) {
$(this).attr("data-click-state", 0);
$(this).animate({bottom:"0"},1000);
console.log("clicked once");
} else {
$(this).attr("data-click-state", 1);
$(this).animate({bottom:"50%"},1000);
console.log("clicked again");
}
});
});
HTML
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="CSS/normalize.css" />
<link type="text/css" rel="stylesheet" href="CSS/main.css" />
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<title>Rmonik</title>
</head>
<body>
<div id="wrapper">
<header>
<h1>
RMONIK
</h1>
<div id="dropdownIcon" data-click-state="0">
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
</header>
<nav></nav>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="Javascript/main.js"></script>
</body>
</html>
You can define mouseover, mouseleave events as named functions; use .off(), complete function of .animate() to re-attach mouseover, mouseleave events to element
$(document).ready(function() {
console.log("ready for action!");
// Dropdown icon hover
function handleMouseOver() {
$(this).fadeTo(500, 1);
}
function handleMouseLeave() {
$(this).fadeTo(500, 0.3)
}
function handleAnimationComplete() {
$(this).on("mouseover", handleMouseOver)
.on("mouseleave", handleMouseLeave)
}
$("#dropdownIcon").on("mouseover", handleMouseOver)
.on("mouseleave", handleMouseLeave);
// Clicking on dropdown icon
$("#dropdownIcon").on("click", function() {
$(this).find("i").toggleClass("fa-chevron-down fa-chevron-up");
console.log("i clicked on the thing!");
if ($(this).attr("data-click-state") == 1) {
$(this).attr("data-click-state", 0);
$(this).off("mouseover mouseleave")
.animate({
bottom: "0"
}, 1000, handleAnimationComplete);
console.log("clicked once");
} else {
$(this).attr("data-click-state", 1);
$(this).off("mouseover mouseleave")
.animate({
bottom: "-200px"
}, 1000, handleAnimationComplete);
console.log("clicked again");
}
});
});
plnkr http://plnkr.co/edit/qpZM7qRJIjcMebvSs7mB?p=preview
Related
$(document).on('click', function() {
if ($(this).is('#clickedElement')) {
console.log('this is clicked');
} else {
console.log('somewhere else clicked');
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-options-icon"><i class="far fa-trash" id="clickedElement"></i></div>
Want to check whether the div is clicked else somewhere is clicked using this way. Really appreciate your help, explain if possible.Thanks <3
Inside a jQuery function event handler, this will refer to the element you attached the listener to. Here, it's document, so that's what this is.
$(document).on('click', function() {
console.log(this === document);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-options-icon"><i class="far fa-trash" id="clickedElement">click</i></div>
Check if the event.target (which will point to the element the event was dispatched to - the innermost element) is the clicked element instead.
$(document).on('click', function(e) {
if ($(e.target).is('#clickedElement')) {
console.log('this is clicked');
} else {
console.log('somewhere else clicked');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-options-icon"><i class="far fa-trash" id="clickedElement">click</i></div>
I tried to add a slowdown effect while returning the element to its original size with resizable.
The slowdown would only have to occur on the turn (when the "Click-me" button was pressed), never while handling the element with the mouse.
I tried add transition property in jQuery .css():
'transition': '1s ease-in-out'
My code is:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<style>
.box {
border: 2px solid #008cba;
margin-top: 10px;
}
</style>
<script>
$(function() {
$('.box').resizable();
$('#btn').click(function() {
$('.box').resizable().css({
'width': 'auto',
'heigth': 'auto',
'transition': '1s ease-in-out'
});
});
});
</script>
</head>
<body>
<button id='btn' type='button'>
Click-me
</button>
<div class='box'>
<h1 class='el1'>
CSS transition element
</h1>
</div>
</body>
</html>
I tried adding the 1 second slow effect when the element was getting back to its normal size.
It’s not possible to do thing.animate({ "height": "auto" });.You
essentially clone the element, remove the fixed heights currently
inflicting the element, and measure/save the value. Then you animate
the real element to that value.
As you are using jQuery You can use this function to animate it:
jQuery.fn.animateAuto = function(prop, speed, callback){
var elem, height, width;
return this.each(function(i, el){
el = jQuery(el), elem = el.clone().css({"height":"auto","width":"auto"}).appendTo("body");
height = elem.css("height"),
width = elem.css("width"),
elem.remove();
if(prop === "height")
el.animate({"height":height}, speed, callback);
else if(prop === "width")
el.animate({"width":width}, speed, callback);
else if(prop === "both")
el.animate({"width":width,"height":height}, speed, callback);
});
}
Then use function as :
$(function() {
$('.box').resizable();
$('#btn').click(function() {
$(".box").animateAuto("both", 1000);
});
});
I have a navbar and is applying a script to it so that when it scrolls the background color changes. I attached this script at the end of the HTML script, after <body>
It doesn't work but if I manually put it through console it works perfectly...
$(document).ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() >= 50) {
$(".navbar").css("background-color", "#222");
} else {
$(".navbar").css("background-color", "transparent");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar" style="height:200px">Navbar</div>
<div style="height:1000px"></div>
I want to make a couple things happen here:
Start button starts the animation and then turns into Stop button.
Stop button then stops animation where it is and turns back into Start button and enables me to resume from where it stopped.
Instead the animation just disappears once i press start or stop again.
I am a newbie when it comes to this kind of stuff, if I am not clear in my intent please tell me so, and I will try to clear it up as best as I can.
<html>
<head>
<meta charset="UTF-8">
<style>
div {left: 0px;
bottom: 100px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
move();
Stop();
});
function move(){
$("input").click(function(){
$(this).val('Stop');
$("div").css({left:'0%'}).animate({left:'100%'},1000, Stop);
Stop();
});
}
function Stop(){
$("input[value='Stop']").click(function(){
$( ":animated" ).stop(true, true, false);
$(this).val('Start');
move();
});
}
</script>
</head>
<body>
<h1 style="text-align:center"> Welcome to the test</h1>
<input type='button' value='Start' id='oneButton'>
<div style="height:100px;width:100px;position:absolute;">
<img id='myRobot' src='myRobot.jpg' width="250px" height="200px"/>
</div>
</body>
</html>
Your JavaScript code is a little bit messy. First of all your move function:
function move(){
$("input").click(function(){
$(this).val('Stop');
$("div").css({left:'0%'}).animate({left:'100%'},1000, Stop);
Stop();
});
}
Your Stop function (not the one set as callback function of the animate function) will be called while the div is animated. You don't want this.
What you might wants is essentially three different functions:
move
pause
reset
Your move function will essentially start to move your object, the pause will obviously pause it, while the reset will put your object in the initial position, if you wanto so.
Let say your HTML file is structured like this:
<h1 style="text-align:center"> Welcome to the test</h1>
<input type='button' value='Start' id='oneButton' />
<div id="object">
<img id='myRobot' alt='test' src='http://www.clker.com/cliparts/7/b/d/b/1237099752389782475nicubunu_Soccer_ball.svg.thumb.png'/>
</div>
Your CSS:
#object {
position: absolute;
left: 0px;
bottom: 100px;
width: 100px;
height: 100px;
}
And finally the JS:
var animating = false;
$("#oneButton").on("click", function() {
if (!animating) {
$(this).val("pause");
move();
} else {
$(this).val("start");
pause();
}
});
function move() {
animating = true;
$("#object").animate({left:'100%'},1000, reset);
}
function pause() {
$("#object").stop();
animating = false;
}
function reset() {
animating = false;
$("#object").css({left: '0%'});
}
Here is a FIDDLE where you can seet in "action".
Im trying to make this image fade into the one below it using a jQuery animation and then have the webpage load about 2 seconds after the fade. How do set a timer for the second function to load? Here is my code:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
.fade
{
z-index:1;}
.abs
{position:absolute;
z-index: 10;}
</style>
</head>
<body>
<div id="fadephoto">
<div id="f4d" class="abs">
<img src="1.jpg" >
</div>
<div class="fade"> <img src="4.jpg" /></div>
</div>
</body>
<script>
{var fadeClicked = false;}
$("#f4d").click(function () {
$(this).fadeTo(2000, 0.01)
fadeClicked = true;
});
$('#fadephoto').click(function()
{
if (fadeClicked)
{
window.location.href = ('http://www.ifdvidfji.com');
}
});
</script>
You can use settimeout. Because you don't want to repeat code you can trigger the click event on your manual bypass.
http://jsfiddle.net/3nKDD/
$("#f4d").click(function() {
$(this).fadeTo(2000, 0.01)
fadeClicked = true;
setTimeout(function() { $('#fadephoto').trigger('click'); }, 2200);
});
Although I would restructure your javascript because right now clicking triggers both handlers and I think you only want it to trigger one of them.
http://jsfiddle.net/3nKDD/2/