JQuery slow image change - javascript

I have 2 pictures.
<div class="work-default-row">
<img class="img1" src="/files/ourWork/titleImages/img1.jpg"/>
<img class="img2" src="/files/ourWork/titleImages/img2.jpg"/>
</div>
In CSS
.work-default-row {
position:relative;
}
.img1 {
width:100%;
height:400px;
}
.img2 {
position:absolute;
top:0px;
left:3000px;
width:100%;
height:400px;
}
and JavaScript
$(".work-default-row").hover(function(){
$(".img2", this).stop().animate({left:"0"},{queue:false,duration:200});
}, function() {
$(".img2", this).stop().animate({left:"3000px"},
{queue:false,duration:200});
});
It "works", on hover, the second image just came from nowhere and overlays the first image. But this solution is HORRIBLE.(The position of img1 is in the middle of page, So I can see how the img2 come from right through whole page and in resolution bigger than 3000px, user is able to see the second image)
Please, can somebody help me and tell me how can i make this images change effective?

If you have the width of the container you can set it to hide anything outside of it with.
#container_id{
overflow:hidden;
}
It looks like your using the work-default-view as your container.

Try this.
$(".slider").hover(
function() {
$(".slider-inner", this)
.stop()
.animate({ left: "0" }, { queue: false, duration: 200 });
},
function() {
$(".slider-inner", this)
.stop()
.animate({ left: "-100vw" }, { queue: false, duration: 200 });
}
);
.slider{
overflow: hidden;
}
.slider-inner {
width: 200vw;
position: relative;
display: flex;
flex-direction: row;
overflow:hidden;
}
img{
width: 100vw;
height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
<div class="slider-inner">
<img src="https://images.unsplash.com/photo-1538291397218-01e8830ddc68?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=fd07afd311ed4a74d0eed33089be01bb&auto=format&fit=crop&w=500&q=60" />
<img src="https://images.unsplash.com/photo-1538306196939-82f33cccacad?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8c3ebd64083bb95f0b27c5d222b0f170&auto=format&fit=crop&w=500&q=60" />
</div>
</div>

Try changing width of img2 instead of left.
$(".work-default-row").hover(function() {
$(".img2", this).stop().animate({
width: "100%"
}, {
queue: false,
duration: 200
});
}, function() {
$(".img2", this).stop().animate({
width: "0"
}, {
queue: false,
duration: 200
});
});
.work-default-row {
position: relative;
}
.img1 {
width: 100%;
height: 400px;
}
.img2 {
position: absolute;
top: 0px;
width: 0;
height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="work-default-row">
<img class="img1" src="https://picsum.photos/200" />
<img class="img2" src="https://picsum.photos/200" />
</div>

Related

Why does the last container flicker?

I'm trying to create a set of div's that will animate on hover. I'm using jQuery and the HoverIntent plugin to animate it.
The HTML
<body>
<div class="wrapper">
<div class="grow" style="background-color:#03045E;"></div>
<div class="grow" style="background-color:#0077B6;"></div>
<div class="grow" style="background-color:#00B4D8;"></div>
<div class="grow" style="background-color:#90E0EF;"></div>
</div>
</body>
... and the JS Code
$(function() {
$('.grow').hoverIntent({
over : function() {
$('.grow').animate({
'width':'15%'
},{duration:400,queue:false});
$(this).animate({
'width':'55%'
},{duration:400,queue:false});
},
out : function() {
//we need to check if the mouse is outside the main object to fire a back to original state. Hence, the mouse out effect on the containers itself should do nothing.
}
});
$('.wrapper').hoverIntent({
out : function() {
$('.grow').animate({
'width':'25%'
});
}
});
});
It is available here - https://jsfiddle.net/be0u3hfx/12/
I cant seem to understand why the last div flickers on hover of any div! Help!?
It's because during the size changes, the widths of the elements will occasionally amount to more than 100% total, and when that happens, the browser briefly wraps the last element, making it appear below the first. To prevent that, add display: flex; to your wrapper's CSS rules.
Fixed code:
$(function() {
$('.grow').hoverIntent({
sensitivity: 1, // sensitivity threshold
interval: 10, // milliseconds for onMouseOver polling interval
timeout: 500, // number = milliseconds delay before onMouseOut
over: function() {
$('.grow').animate({
'width': '15%'
}, {
duration: 400,
queue: false
});
$(this).animate({
'width': '55%'
}, {
duration: 400,
queue: false
});
},
out: function() {}
});
$('.wrapper').hoverIntent({
over: () => {},
out: function() {
$('.grow').animate({
'width': '25%'
});
}
});
});
* {
box-sizing: border-box;
}
body {
background-color: black;
margin: 0 auto;
padding: 10px;
height: 100vh;
width: 100%;
}
.wrapper {
padding: 10px;
height: 100%;
background: #fff;
display: flex;
}
.grow {
box-sizing: border-box;
height: 100%;
/* Original height */
width: 25%;
/* Original width */
float: left;
/* Just for presentation (Not required) */
position: relative;
/* Just for presentation (Not required) */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.hoverintent/1.10.1/jquery.hoverIntent.min.js"></script>
<div class="wrapper">
<div class="grow" style="background-color:#03045E;"></div>
<div class="grow" style="background-color:#0077B6;"></div>
<div class="grow" style="background-color:#00B4D8;"></div>
<div class="grow" style="background-color:#90E0EF;"></div>
</div>

How to animate a text that both slides and fades in using JavasScript and/or JQuery?

I have searched on google and here but not been able to implement any of the tips. I'm not good at JS at all. What I want to do is to have a single line of text fade in while it's floating upwards when you hover on a div and the reverse when you stop hovering.
I have not been able to use both the slide and fade effects.
Here is my code using JQuery 2.3.1
$(function() {
// DOM ready
$('#card1').hover(
function() {
$('#artist1').slideDown();
},
function() {
$('#artist1').slideUp();
});
});
#artist1 {
position: absolute;
top: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="card1" style="width: 100px; height: 100px; background-color: red;">
<h4 id="artist1" class="artistname ">testname</h4>
</div>
See changes to style and tags:
$(function() {
var slideDuration = 300;
$('#card1').hover(
function() {
$('#artist1').stop(true, true)
.fadeIn({ duration: slideDuration*3, queue: false })
.css('display', 'none').slideDown(slideDuration);
},
function() {
$('#artist1').stop(true, true)
.fadeOut({ duration: slideDuration*1.5, queue: false })
.slideUp(slideDuration*3);
}
)
});
#artist1 {
position: relative;
top: -10px;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="card1" style="width: 100px; height: 100px; background-color: red;"></div>
<h4 id="artist1" class="artistname ">testname</h4>

Looping or repeatedly running a bunch of JQuery functions

I was learning JQuery on my own and yesterday night I stumbled upon a doubt and am stuck since then.
simple: I need the animation to repeat on loop. but it is not working, can you please help me out? I have tried setInterval, it is not working.
The fiddle is: https://jsfiddle.net/8v5feL9u/
$(document).ready(function(){
//window.setInterval(function(){
$(".img1").css({display:''});
$(".img1").animate({bottom: '300px', opacity: '1'}, 2000, function(){
$(".img1").fadeOut(700);
$(".img1").css({display:'none', bottom: '', opacity:'0'});
$(".img2").css({display:''});
$(".img2").animate({top: '300px', opacity: '1'}, 2000, function(){
$(".img2").fadeOut(700);
$(".img2").css({display:'none', top: '', opacity:'0'});
$(".img3").css({display:''});
$(".img3").animate({bottom: '300px', opacity: '1'}, 2000, function(){
$(".img3").fadeOut(700);
$(".img3").css({display:'none', bottom: '', opacity:'0'})
$(".img4").css({display:''});
$(".img4").animate({top: '300px', opacity: '1'}, 2000, function(){
$(".img4").fadeOut(700);
$(".img4").css({display:'none', top: '', opacity:'0'});
});
});
});
});
//});
});
thank you so much.
You can wrap your animation in a function and then call that function recursively in the last "animation complete" callback on the most nested part of the animation.
function doAnimation() {
$('.animate')
.hide()
.fadeIn(1000, function() {
$(this).fadeOut(1000, function() {
// recursively call our function in the inner-most animation callback
doAnimation();
});
})
}
// start out initial loop
doAnimation();
.animate {
padding: 30px;
background: cornflowerblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animate">animate me</div>
Without re-writing entire piece, you can provide a name for and call the function passed to .ready() within last nested .animate() callback function
$(function fn() {
$(".img1").css({
display: ''
});
$(".img1").animate({
bottom: '300px',
opacity: '1'
}, 2000, function() {
$(".img1").fadeOut(700);
$(".img1").css({
display: 'none',
bottom: '',
opacity: '0'
});
$(".img2").css({
display: ''
});
$(".img2").animate({
top: '300px',
opacity: '1'
}, 2000, function() {
$(".img2").fadeOut(700);
$(".img2").css({
display: 'none',
top: '',
opacity: '0'
});
$(".img3").css({
display: ''
});
$(".img3").animate({
bottom: '300px',
opacity: '1'
}, 2000, function() {
$(".img3").fadeOut(700);
$(".img3").css({
display: 'none',
bottom: '',
opacity: '0'
})
$(".img4").css({
display: ''
});
$(".img4").animate({
top: '300px',
opacity: '1'
}, 2000, function() {
$(".img4").fadeOut(700);
$(".img4").css({
display: 'none',
top: '',
opacity: '0'
});
// call `fn` again here
fn()
});
});
});
});
});
.bckgrnd {
width: 100vw;
height: 100vh;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- this is the end of the head tag-->
<!--this is the start of the body tag-->
<body>
<div class="bckgrnd w3-center w3-grey" style="position:absolute; z-index:-1">
<img src="https://s1.postimg.org/a51sj109n/image1.jpg" class="w3-image img1" style="width:100vw; height:148vh; margin-bottom: -48vh; position: fixed; left: 0px; opacity: 0;">
<img src="https://s1.postimg.org/57o7xwyaj/image2.jpg" class="w3-image img2" style="width:100vw; height:148vh; margin-top: -48vh; left: 0px; display:none; position:fixed; opacity: 0">
<img src="https://s1.postimg.org/k4woyxbiz/image3.jpg" class="w3-image img3" style="width:100vw; height:148vh; margin-bottom: -48vh; left:0px; position:fixed; display:none; opacity: 0">
<img src="https://s1.postimg.org/a8vlza5qz/image4.jpg" class="w3-image img4" style="width:100vw; height:148vh; margin-top: -48vh; left:0px; display:none; position: fixed; opacity: 0">
</div>
<div class="w3-container w3-black w3-center" style="z-index:1000 !important">
<h1>Hi how are you</h1>
</div>

SetTimeout does not work correctly in jQuery

This is my code.
I want the images get larger after one second if I hold the mouse on each of them but there is no response from the setTimeout. Even when I put an alert() function at the beginning of the menuChanging() function, it runs but the rest of my code does not execute (it runs immediately, not after one second).
You are invoking the function menuChanging immediately on mouseover, instead you need to pass a function reference to setTimeout
$(function() {
$(".hormenu > div").hover(function() {
$(this).data('hoverTimer', setTimeout(menuChanging.bind(this), 1000));
}, function() {
var $this = $(this);
//if you move out before 1s then clear the timer
clearTimeout($this.data('hoverTimer'));
//when the mouse is moved out restore to initial state if required
if ($this.hasClass('current')) {
$this.toggleClass("current other").animate({
width: "100px",
opacity: "0.5"
}, 750, 'easeOutBounce');
}
});
});
function menuChanging() {
var duration = 750;
$(".hormenu > .current").not(this).toggleClass("current other").animate({
width: "100px",
opacity: "0.5"
}, duration, 'easeOutBounce');
$(this).removeClass("other").addClass("current").animate({
width: "600px",
opacity: "1"
}, duration, 'easeOutBounce');
}
.hormenu {
height: 500px;
width: 1800px;
}
img {
height: 100%;
width: 100%;
}
.hormenu div {
width: 100px;
overflow: hidden;
display: block;
float: left;
height: 100%;
}
.other {
opacity: 0.5;
}
img {
width: 600px;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<div class="hormenu">
<div class="current">
<img src="http://img0.mxstatic.com/wallpapers/b844e6ef0e3320bc945a9b5b1cd196f9_large.jpeg" alt="" />
</div>
<div class="other">
<img src="http://img0.mxstatic.com/wallpapers/20c41d877dfbed0e52947f51846df781_large.jpeg" alt="" />
</div>
<div class="other">
<img src="http://img0.mxstatic.com/wallpapers/b844e6ef0e3320bc945a9b5b1cd196f9_large.jpeg" alt="" />
</div>
</div>
Here you can find a solution to your issue.
$(function(){
$(".hormenu div").mouseover(
function()
{
setTimeout(menuChanging($(this)),1000);
}
);
});
function menuChanging(div) {
return function(){
var duration = 750 ;
if (!div.hasClass("current")) {
$(".current").removeClass("current").addClass("other").animate({
width: "100px",
opacity: "0.5"
}, duration, 'easeOutBounce');
}
div.removeClass("other").addClass("current").animate({
width: "600px",
opacity: "1"
}, duration, 'easeOutBounce');
}
}
FIDDLE
You were calling the function and not passing it to setTimeout. I also changed some things to retrieve easily the div. The new function returns a function to call and this new function can access the first one's parameter.

Jquery Text Animation

I am converting flash banner into html5 banner . Everything is working fine except the text animation. The text should work like this but my text is working fine but it is coming over the border it should work like my image animation which is working within the border. Here is my code http://jsfiddle.net/tU9LV/
<div id = "wrapper" >
<div id="mainContainer">
<div>
<img id="introImg" src="http://i.imgur.com/FClbHjn.png"/>
</div>
<div id="images">
<p id="headline1Txt" >Striped Bag</p><br />
<p id="headline2Txt" >$14</p><br />
<p id="headline3Txt" >Sale $25</p><br />
</div>
<div id="ctaBtn">
<button class="btn btn-primary" type="button">SHOP NOW</button>
</div>
</div>
</div>
$(document).ready(function () {
bannerAnimation();
});
function bannerAnimation(){
//Jquery Animation
$("#introImg").animate({ width: "120px",
height: "140px"
}, 1000);
$("#headline1Txt").animate({ left: "20" }, 500, function () {
$("#headline1Txt").animate({ left: "10" }, 200);
});
setTimeout(function () {
$("#headline2Txt").animate({ left: "20" }, 500, function () {
$("#headline3Txt").animate({ left: "20" }, 500, function () {
$("#headline3Txt").animate({ left: "10" }, 200);
});
$("#headline2Txt").animate({ left: "10" }, 200);
});
}, 1000);
}* {
margin:0;
padding:0;
}
#wrapper {
outline: 12px solid rgba(186,202,228 , 1);
width:285px;
height:235px;
position: absolute;
}
#mainContainer{
background: url('https://secure-ds.serving-sys.com/BurstingRes/Site-8188/Type-0/5fefb401-b187-4d82-b4db-cbd2ef29cc48.gif');
width:285px;
height:235px;
overflow: hidden;
position: fixed;
}
#introImg{
position:absolute;
top:80px;
left:150px;
right:100px;
opacity: 100;
}
#ctaBtn{
top:200px;
left:15px;
position:absolute;
}
#headline1Txt, #headline2Txt, #headline3Txt
{
position:absolute;
overflow: hidden;
margin:60px 8px;
left: -120px;
}
#headline2Txt, #headline3Txt
{
font-size:21px;line-height: 2.0;
}
#headline1Txt
{
font-size:26px;line-height: 1.5;
}
The simple solution for this if you can't change your background image is to layover a div for the borders..
http://jsfiddle.net/K3SXu/
I've added:
<div id="borders"></div>
to the html.
and:
#borders { position:absolute; top:0; left:0; z-index:999; border:12px solid rgba(186,202,228,1); width:285px; height:235px;}
to the css. and also removed the 'outline' property from the #wrapper.
it works :)

Categories