I have this infobox that will slide to show on hover on a arrow connected to that infobox. See the jsfiddle I've linked further down for more insight.
The thing I'm struggling with is that it's sort of laggy. It jumps back and forth really fast as it likes and it bothers me a lot. I've done some research and found out that the .stop(true, false) is the thing messing it up, but that you can't really go without it either. Haven't found any smooth solution yet though...
I would like it, if possible, to...
...when hovered, fully animate the animation even though the mouse leaves.
...animate when #infoboxArrow is hovered and then animate back when the mouse leaves its parent #infocontainer.
$('#infoboxArrow').hover(function() {
$('#infocontainer')
.stop(true, false)
.animate({
right: 250
}, 600);
}, function() {
$('#infocontainer')
.stop(true, false)
.animate({
right: 0
}, 600);
});
#infocontainer{
position:fixed;
background-color: blue;
top: 0em;
right: 0em;
}
#infoboxArrow {
display: inline-block;
background-color: pink;
margin-bottom: 10.1325em;
margin-top: 10.1325em;
height: 7.735em;
}
#infoboxDiv{
display: inline-block;
background-color: yellow;
width: 400px;
height: 28em;
position: absolute;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="infocontainer" class="slideOutTab">
<div id ="infoboxArrow" class="slideOutTab"><img src="http://i61.tinypic.com/qmx8ns.png"/></div>
<div id="infoboxDiv" class="slideOutTab"></div>
</div>
Try listening to mouseenter and mouseleave events instead of hover:
var $infocontainer = $('#infocontainer');
$('#infoboxArrow').on('mouseenter', function() {
$infocontainer
.stop(true, false)
.animate({
right: 250
}, 600);
});
$infocontainer.on('mouseleave', function() {
$infocontainer
.stop(true, false)
.animate({
right: 0
}, 600);
});
var $infocontainer = $('#infocontainer');
$('#infoboxArrow').on('mouseenter', function() {
$infocontainer
.stop(true, false)
.animate({
right: 250
}, 600);
});
$infocontainer.on('mouseleave', function() {
$infocontainer
.stop(true, false)
.animate({
right: 0
}, 600);
});
#infocontainer{
position:fixed;
background-color: blue;
top: 0em;
right: 0em;
}
#infoboxArrow {
display: inline-block;
background-color: pink;
margin-bottom: 10.1325em;
margin-top: 10.1325em;
height: 7.735em;
}
#infoboxDiv{
display: inline-block;
background-color: yellow;
width: 400px;
height: 28em;
position: absolute;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="infocontainer" class="slideOutTab">
<div id ="infoboxArrow" class="slideOutTab"><img src="http://i61.tinypic.com/qmx8ns.png"/></div>
<div id="infoboxDiv" class="slideOutTab"></div>
</div>
Also note you don't need the image. And you are mixing em units with px, so your layout could break if the font size changes. Consider this code:
var $infocontainer = $('#infocontainer');
$('#infoboxArrow').on('mouseenter', function() {
$infocontainer
.stop(true, false)
.animate({
right: 250
}, 600);
});
$infocontainer.on('mouseleave', function() {
$infocontainer
.stop(true, false)
.animate({
right: 0
}, 600);
});
#infocontainer{
position: fixed;
height: 28em;
background-color: blue;
top: 0em;
right: 0em;
}
#infoboxArrow {
display: inline-block;
background-color: pink;
position: relative;
top: 50%;
margin-top: -59px;
border: 59px solid #FFC0CB;
border-right: 100px solid #000000;
border-left: none;
}
#infoboxDiv{
display: inline-block;
background-color: yellow;
width: 400px;
height: 100%;
position: absolute;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="infocontainer" class="slideOutTab">
<div id="infoboxArrow" class="slideOutTab"></div>
<div id="infoboxDiv" class="slideOutTab"></div>
</div>
Related
What I want to happen is when I hover the cursor to an image, it will start the looping animation. And when I leave the cursor, it stops the animation. It indeed stops but the looping animation does not work anymore when I hover it to a image again.
$(".right-section img").mouseenter(function() {
var hoveredImage = $(this).attr("id");
function loop() {
$("#" + hoveredImage).animate({
bottom: "15px"
}, 500).animate({
bottom: 0
}, 500, function() {
loop();
});
}
loop();
$("#" + hoveredImage).mouseleave(function() {
$(this).dequeue();
$(this).css({
bottom: ""
});
});
});
To do what you require call stop() to clear the animation queue for the img:
$(".right-section img").mouseenter(function() {
function loop($img) {
$img.animate({
bottom: "15px"
}, 500).animate({
bottom: 0
}, 500, function() {
loop($img);
});
}
loop($(this));
}).mouseleave(function() {
$(this).stop(true);
});
.right-section img {
width: 100px;
height: 100px;
display: block;
background-color: #C00;
position: absolute;
bottom: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="right-section">
<img />
</div>
That being said, a far better approach would be to use CSS for the animation. CSS performs better, and also it better meets the separation of concerns principle. Try this:
.right-section img {
width: 100px;
height: 100px;
display: block;
background-color: #C00;
position: absolute;
bottom: 0;
}
.right-section img:hover {
animation: bounce 1s ease-in-out infinite;
}
#keyframes bounce {
0% { bottom: 0; }
50% { bottom: 15px; }
100% { bottom: 0; }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="right-section">
<img />
</div>
I've created some Donut charts with a simple fill animation but I'm having trouble triggering the animation on scroll. Would it be a good idea to add in animate.css and wow.js or is there an easier way to trigger the animation inside of the function? Thanks in advance for the help if you are able to help with this issue.
<div class="donut-chart orange" data-percent="72">
<p><span class="counter" data-count="72">0</span>%</p>
<div class="doughnut"></div>
</div>
$(function() {
$('.donut-chart').each(function(index) {
$(this).append('<svg preserveAspectRatio="xMidYMid" xmlns:xlink="http://www.w3.org/1999/xlink" id="donutChartSVG' + index + '"><path d="M100,100"/></svg>');
var p = new Donut_chart({
element: $('#donutChartSVG' + index),
percent: $(this).attr('data-percent')
});
p.animate();
});
});
$('.counter').each(function() {
var $this = $(this),
countTo = $this.attr('data-count');
$({
countNum: $this.text()
}).animate({
countNum: countTo
}, {
duration: 2000,
easing: 'linear',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
}
});
});
.donut-chart svg {
pointer-events: none;
height: 100%;
stroke: #19a8ff;
}
.donut-chart svg path {
fill: none;
stroke-width: 35px;
stroke: #19a8ff;
}
.donut-chart {
width: 200px;
height: 200px;
display: inline-block;
left: 20%;
margin-bottom: 30px;
}
.donut-chart p {
margin: 0;
position: absolute;
left: 1%;
top: 25%;
font-family: 'Open Sans', sans-serif;
font-weight: bolder;
color: #222;
width: 100%;
text-align: center;
font-size: 2em;
}
.doughnut {
border: 35px solid #EAECEF;
border-radius: 100px;
height: 200px;
width: 200px;
position: absolute;
top: 0px;
z-index: -1;
}
try this, just check if the user scrolls then include inside if() your event function.
$(window).scroll(function() {
if ($('.donut-chart').is(':visible')) {
// do your stuff here, include function with p.animate();
}
});
but remember that this may slow down the performance of your site. You may refer to this site for improvement, https://johnresig.com/blog/learning-from-twitter/.
I'm trying to do an animation on page scroll where selected element will animate from left to right on scroll down and if back to top then animate the selected element from right to left (default position), here's what I tried
$(document).ready(function() {
$(window).scroll(function() {
var wS = $(this).scrollTop();
if (wS <= 10) {
$("#test-box").animate({
'left': 100
}, 500);
}
if (wS > 11) {
$("#test-box").animate({
'left': $('#main-container').width() - 100
}, 500);
}
});
});
#main-container {
width: 100%;
overflow: auto;
height: 500px;
}
#test-box {
background: red;
color: #ffffff;
padding: 15px;
font-size: 18px;
position: fixed;
left: 100;
top: 10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-container">
<div id="test-box">test</div>
</div>
As you can see, on scroll down, the test box moves as I instruct but when scroll up, it does not go to the left as default, any ideas, help please?
You can add a global variable to control the animation. See the working snippet below please, where I've commented parts of the code that I added:
$(document).ready(function() {
var animated = false; //added variable to control the animation
$(window).scroll(function() {
var wS = $(this).scrollTop();
if (animated && wS <= 10) {
$("#test-box").animate({
'left': 100
}, 500);
animated = false; //animation ended
}
if (!animated && wS > 11) {
$("#test-box").animate({
'left': $('#main-container').width() - 100
}, 500);
animated = true; //it was animated
}
});
});
#main-container {
width: 100%;
overflow: auto;
height: 500px;
}
#test-box {
background: red;
color: #ffffff;
padding: 15px;
font-size: 18px;
position: fixed;
left: 100px;
top: 10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-container">
<div id="test-box">test</div>
</div>
This should work, it also uses css for the animation.
$(document).ready(function() {
var box = document.querySelector('#test-box');
var stateClass = '-right';
window.addEventListener('scroll', function(event) {
box.classList.toggle(stateClass, document.body.scrollTop > 10);
});
});
#main-container {
width: 100%;
overflow: auto;
height: 2000px;
}
#test-box {
background: red;
color: #ffffff;
padding: 15px;
font-size: 18px;
position: fixed;
left: 100px;
top: 10;
transition: .5s linear;
}
#test-box.-right {
left: 100%;
transform: translateX(-100%) translateX(-100px)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-container">
<div id="test-box">test</div>
</div>
I am try to get a menu to slide to the left on click of a button and then slide back to its original position on click of the same button. I am using toggle, but I can not seem to get it to work. The button would also slide to the right so it is visible when the menu is not. Without the toggle method the menu and button slide correctly, but do not slide back.
JQuery:
$("#menu-button").click(function() {
$("#menu-button").toggle(function() {
$("#menu").animate({
"left": "-=300px"
}, "slow");
$("#menu-button").animate({
"right": "-=60px"
}, "slow");
},
function() {
$("#menu").animate({
"left": "+=300px"
}, "slow");
$("#menu-button").animate({
"right": "-=60px"
}, "slow");
}
});
});
HTML:
<div id="menu">
<button id="menu-button">press</button>
</div>
CSS:
#menu {
width: 300px;
height: 500px;
background-color: black;
position: absolute;
left: 0;
}
#menu-button {
width: 48px;
height: 48px;
background-color: red;
float: right;
margin: 10px;
text-align: center;
cursor:pointer;
position: relative;
}
Instead of toggle, I find it easiest, possibly years later, to review code that is explicit. Personal preference is to use a var to store current div state. Personal preference . . . but it works.
var menuOut = true;
$("#menu-button").click(function() {
if (menuOut){
menuOut = false;
$("#menu").animate({
"left": "-300px"
}, "slow");
$("#menu-button").animate({
"left": "60px"
}, "slow");
}else{
menuOut = true;
$("#menu").animate({
"left": 0
}, "slow");
$("#menu-button").animate({
"left": 0
}, "slow");
}
});
#menu {
position: absolute;
left: 0;
width: 300px;
height: 500px;
background-color: darkcyan;
}
#menu-button {
position: relative;
width: 48px;
height: 48px;
background-color: red;
float: right;
margin: 10px;
text-align: center;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="menu">
<button id="menu-button">press</button>
</div>
When hover on the first and second element, some element will animate to the left, it works well if hovered with a normal speed, but will crashed if hovered too fast for some times
(the text won't show or the text won't move back to its original place when mouseoff, checkout the figures below).
Any suggestions would be appreciated.
1.text won't show
2.text won't move back to its original place
$(document).ready(function() {
var flag = false;
$(".tab-ico").hover(function() {
var f = $(this);
f.data('timeout', window.setTimeout(function() {
f.find(".tab-text").stop(true, true).animate({
left: "-=64"
}, 300, function() {
flag = true;
});
}, 300));
}, function() {
clearTimeout($(this).data("timeout"));
if (flag === true) {
$(this).find(".tab-text").stop(true, true).animate({
left: "+=64"
}, 300, function() {
flag = false;
});
}
});
});
.pfm-toolbar-wrap {
height: 100%;
position: fixed;
right: 0;
top: 0;
width: 35px;
z-index: 9990;
}
.pfm-tbar-tab-Spike {
position: relative;
width: 35px;
}
.pfm-toolbar-tabs {
border-right: 5px solid #7a6e6e;
height: 100%;
}
.p-tab div.tab-ico {
background: #7a6e6e;
}
.tab-text {
border-radius: 3px;
color: #fff;
height: 32px;
left: 0px;
line-height: 32px;
position: absolute;
text-align: center;
width: 70px;
padding-right: 5px;
z-index: -1;
background: #7a6e6e;
}
.tab-text a {
color: #fff;
display: block;
}
.p-tab {
left: 0;
margin-top: -100px;
position: absolute;
top: 50%;
width: 35px;
z-index: 9;
text-align: center;
}
.p-tab div.tab-ico:hover {
background: #e20531;
cursor: pointer;
}
.p-tab div.tab-ico:hover .tab-text {
background: #e20531;
}
.tab-ico {
width:35px;
height:35px;
margin-bottom:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="pfm-toolbar-wrap">
<div class="pfm-toolbar-tabs">
<div class="p-tab">
<div class="pfm-tbar-tab-Spike m_b15">
<div class="tab-ico cart"> <i class="cbl-icon"></i> <em class="tab-text"> text</em>
</div>
</div>
<div class="pfm-tbar-tab-group m_b15">
<div class="tab-ico "> <i class="cbl-icon"></i>
<em class="tab-text"> text2</em>
</div>
</div>
</div>
</div>
</div>
you can use css transition-delay property as follows:
transition-delay: 1s; /* delays for 1 second */
-webkit-transition-delay: 1s; /* for Safari & Chrome */
Find more info here.
I suggest that you use CSS transition, here are two links that will help you make that with less code and using CSS transition
https://css-tricks.com/almanac/properties/t/transition/
https://blog.alexmaccaw.com/css-transitions