I am working on angular program in which I have an image which I am animating by using jQuery .animate() property.Its working fine but the issue occur when I change the state using ui-router in middle of the animation.
It result in abrupt behaviour like even its url changes but the animation process still persist.I have tried .stop() , .clearQueue() and even .finish() property to end the animation before switching but nothing help me at all.
app.controller('appCtrl',function () {
setTimeout(function () {
$('#character').animate({marginTop:"A1px",marginLeft:"B1px"},1000);
},1000);
setTimeout(function () {
$('#character').animate({marginTop:"A2px",marginLeft:"B2px"},1000);
},3000);
setTimeout(function () {
$('#character').animate({marginTop:"A3px",marginLeft:"B3px"},1000);
},5000);
setTimeout(function () {
$('#character').animate({marginTop:"A4px",marginLeft:"B4px"},1000);
},7000);
setTimeout(function () {
$('#character').animate({marginTop:"A5px",marginLeft:"B5px"},1000);
},9000);
});
<div class="">
<div class="">
<img src="character.png" id="character" alt="" />
</div>
<div class="">
<input type="button" name="name" value="BACK" ui-sref="backpage">
<input type="button" name="name" value="NEXT" ui-sref="nextpage">
</div>
</div>
Here is updated plunker.
Use $timeout and on controller destroy remove the timeout .
$scope.$on('$destroy', function() {
$timeout.cancel(timer);
});
Better practice do never merge jQuery with Angular.
Use ngAnimate instead of jQuery's .animate() property.
Check here for illustrations and examples.
For the above. try this
angular.element(document.querySelector(#character)).animate({marginTop:"A1px",marginLeft:"B1px"},1000);
instead of
$('#character').animate({marginTop:"A1px",marginLeft:"B1px"},1000);
Related
Here is my script which works as well:
$(document).ready(function(){
function toggleForever() {
$("#div1").fadeToggle("slow", toggleForever);
}
$("button#start").click(function () {
toggleForever();
});
$("button#stop").click(function () {
$("#div1").stop().animate({opacity:1}, "slow");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="start">Click to fade in/out box</button>
<button id="stop">Click to stop</button><br /><br /><br />
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
Now I need to improve my code structure. In reality, I need to use toggleForever() function for multiple different elements. So I think if I put this line:
$("#div1").stop().animate({opacity:1}, "slow");
into the function, and passing an element like $("#div1") to the function, it will be more flexible. And then I can start / stop blinking for every element that I'm passing. Doing that is possible?
I saw this post and I tried to replicate the code: Stop a gif animation onload, on mouseover start the activation. I can't seem to get it to work though. My goal is to swap the image with a gif on hover. Does someone know why the image isn't swapping?
$(document).ready(function() {
$("#imgAnimate").hover(
function() {
$(this).attr("src", "images/portfolio/form.gif");
},
function() {
$(this).attr("src", "images/portfolio/form.jpg");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="large-12 medium-12 small-12 columns portfolio-pic animated slideInUp">
<div data-content="Project 1" class="image">
<a class="a-block" href="#">
<img id="imgAnimate" src="images/portfolio/form.jpg">
</a>
</div>
</div>
</div>
Here is a live link to my example: http://fosterinnovationculture.com/dcc/index.html
From what your page is saying jQuery is undefined. So either you are trying to execute jquery code before jquery is executed.
I executed this code on your site just to testing things out and it seems to be working
function mousein () {
$(this).attr("src", "images/portfolio/form.gif");
console.log('hello')
}
function mouseout () {
$(this).attr("src", "images/portfolio/form.jpg");
}
console.log($('#imgAnimate').hover(mousein, mouseout));
I did notice though that because of some styling issues the hover was never actually hitting the img it was actually hitting the .image:after css psuedo selector so you need to reorganize your html or change the way you select the element you want to switch the src of.
just to test in your html move the image outside of
<div class="image">image</div>
Yes its correct as told by #madalin ivascu, you need to add jquery at header and it will work.
Like this,
HTML
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#imgAnimate").hover(
function() {
$(this).attr("src", "banana.gif");
},
function() {
$(this).attr("src", "banana.png");
});
});
</script>
</head>
<body>
/* include your html part here */
<a class="a-block" href="#">
<img id="imgAnimate" src="banana.png" alt="">
</a>
</body>
Try this, Instead of using hover, try that using mouseenter and mouseleave.
$(document).ready(function(){
$(".row").find('img').mouseenter(function(){
if($("#imgAnimate").attr('src','form.jpg')){
$("#imgAnimate").attr('src','form.gif');
}
$(this).mouseleave(function(){
if($("#imgAnimate").attr('src','form.gif')){
$("#imgAnimate").attr('src','form.jpg');
}
});
});
});
I have a mobile app with a search bar and these functions:
$(".dk").hide(0);
$("#fus").click(function () {
$(".dk").fadeOut(100);
$("#sim").removeAttr("autofocus")
});
$("#ys").click(function (e) {
$("#s,#u,#n,#l,#a,#m,.dk").hide(100);
$("#re,#r").animate({"margin-left": "0px"}, 200);
$("#s,#u,#n").animate({ "margin-left": "2px"}, 200);
$("#sim").delay(300).attr({"autofocus": "autofocus"});
$(".dk").fadeIn(100);
e.stopPropagation();
});
})
HTML
<div style="padding-top:10px;" id="toolbar">
<div class="tbar">
<img style="height:30px;" src="img/cles.png" />
<div class="ha">
<img id='ys' style=" height:27px" src="img/searchico.png" />
</div>
</div>
</div>
<div class='dk'>
<form id="hif">
<input id='sim' type="search">
<img style="position:absolute;height:26px;margin-left:-270px;margin-top:20px;" src="img/searchicog.png">
</form>
</div>
I am trying to fade in and out the div .dk (aka the search box). #Ys is the search icon, #sim is the input field, and #fus is the place to click (or tap) to trigger the fadeOut func.
Unfortunately it only autofocuses once. It also it messes up the fadeIn when it does work. After, I have to refresh the page for it to autofocus again.
This YouTube video shows what I want to accomplish: https://www.youtube.com/watch?v=T5n3m2LRy5Y
Setting the autofocus attribute does not cause the focus to change. Instead, you should use the .focus() method.
$(".dk").hide(0);
$("#fus").click(function () {
$(".dk").fadeOut(100);
$("#sim").removeAttr("autofocus")
});
$("#ys").click(function (e) {
$("#s,#u,#n,#l,#a,#m,.dk").hide(100);
$("#re,#r").animate({"margin-left": "0px"}, 200);
$("#s,#u,#n").animate({ "margin-left": "2px"}, 200);
$("#sim").delay(300).focus();
$(".dk").fadeIn(100);
e.stopPropagation();
});
})
Additionally, .delay does not delay non-animations, so to delay the focus, you'll need to use setTimeout.
setTimeout(function(){
$("#sim").focus()
},300)
I have a 'div' tag( by id=go) and write a script which i click on div, then another div (by id=example) will be shown, and show some data:
this is my div :
<div id="go" style="position: relative">Click</div>
<div id="example" style="position: relative"></div>
and the script:
$("#go").click(function () {
$("#example").fadeIn(1200);
$("#count").text('');
setInterval(
function () {
p(); count();
}, 8000);
});
and i want when i click on div(by id= go) agin the div (with id=example) be hide , How can i improve my script to do it?
You can use fadeToggle() to toggle between fadeIn() and fadeOut() here:
$("#example").fadeToggle(1200);
Fiddle Demo
Did you try .toggle()?
Reference is at jQuery docs. AFAIK it does all you need - including animation.
Use .toggle(). Check this
$("#example").hide();
$("#go").click(function () {
$("#example").toggle('slow');
});
DEMO
I have a script that shows 2 divs and hides 1 div after a user submits a form. The form's target is an Iframe on the same page. The Iframe takes a while to load.
I would like to delay the Hide/Show events until the Iframe loads. I was able to do this with a loading animation, but I am not sure how to do this with the Hide/Show script.
This is the Hide/Show script
$(function () {
$('#form_710370').submit(function (e) {
e.preventDefault(); // add this
$('#form_container').hide()
$('#mydivhide1, #mydivhide2').show();
return false;
});
});
This is the HTML
<div id="mydivhide1">1111</div>
<div id="mydivhide2">2222</div>
<div id="form_container">
<form id="form_710370" target="iframe" method="post" convert.php">
<input id="Website" name="url1" type="text" value=""/>
<input id="saveForm" type="submit" name="submit" value="submit" />
</form>
</div>
This is the relevant CSS
#mydivhide1 {display:none;}
#mydivhide2 {display:none;}
Detect your iFrame has loaded :
$('#YourIframe').load(function(){
});
On your form submitted :
$("#form_710370").on('ajax:complete',function(){
});
Put your hide and show code inside iframe load() function.
$('#frame').load(function(){
$('#form_container').hide();
$('#mydivhide1, #mydivhide2').show();
});
Try this
timeout = setTimeout(function () {
$('#form_container').hide();
}, 6000);
// delay
setTimeout(function () {
// after delay
$('#form_container').animate({
'height': '0px'
}, '400', 'swing', function () {
// finish animate fadeIn
$('#mydivhide1, #mydivhide2').fadeIn('400');
});
}, '700');
Hope is help