$('.blue-anim').hover(function(){
setTimeout(function(){
$('.blue-anim').load('/web #physics')
}, 1000);
$('.bluefigcaption').text("Physics").removeClass('blue_figcaption').addClass('new_caption');
}, function(){
$('.blue-anim').load('/web #past');
$('.blue figcaption').text("Past").removeClass('new_caption').addClass('blue_figcaption');
}
);
This is my java script for hover an image. The hover in works correctly as it replaces as image with another image with load(). The hoverout also works which essentially brings back the old image. But just after the hoverout jquery again bring the hoverin image back. When I check in firebug, I see that the load() function in hoverin in again being run. Just the load() function nothing else. Why is it happening? Is the load script embedded in the html or something? If so how can I remove it?
I tried to reassemble your code, this
$(function () {
$(".blue-anim").hover(function() {
$(".blue-anim").load("https://raw.githubusercontent.com/xxxmatko/xDev.RequireJs/master/README.md");
$('.blue-figcaption')
.text("Physics")
.removeClass('blue-figcaption')
.addClass('new-caption');
}, function() {
$(this).load("https://raw.githubusercontent.com/xxxmatko/xDev.Boilerplates/master/README.md");
$('.new-caption')
.text("Past")
.removeClass('new-caption')
.addClass('blue-figcaption');
});
});
.blue-anim {
background: blue;
width: 600px;
height: 200px;
}
.blue-figcaption {
color: blue;
}
.new-caption {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="blue-anim">
</div>
<div class="blue-figcaption">
</div>
works for me
Related
Below is the code I am working on
$("#firstnamesubmitbutton").click(function(){
$(".hrmed").addClass("lineanimation", function(){
$(".firstnamesection").addClass("animate fadeOut");
$(".firstnamesection").addClass("hidden");
$(".hrmed").removeClass("lineanimation");
$(".lastnamesection").removeClass("hidden");
alert("Code was executed");
});
});
I am trying to created a nested jQuery function so that the rest of the code is called after the "lineanimation" class has been added but when I run this code the "lineanimation" class is added and the rest of the commands are not executed. Can anyone help me understand the correct syntax to solve my problem?
Thanks in advance
As I'd mentioned above, .addClass() is instant. As such, it does not take a callback method. Additionally, it has no way of inherently knowing the duration of your CSS transition.
Instead, you could use setTimeout(). It will execute a given function after waiting X milliseconds.
The first argument would be the function you've written in your question. The second parameter corresponds to the length of your CSS animation.
(For example, a 3s animation would be 3000.)
$("#firstnamesubmitbutton").click(function() {
var $hrmed = $(".hrmed");
$hrmed.addClass("lineanimation");
setTimeout(function() {
$(".firstnamesection").addClass("animate fadeOut hidden");
$hrmed.removeClass("lineanimation");
$(".lastnamesection").removeClass("hidden");
console.log("Code was executed");
}, 3000);
});
.hrmed {
padding: 50px;
border: 1px solid black;
}
.hrmed.lineanimation {
background: blue;
transition: background 3s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="firstnamesubmitbutton">Click me</button>
<div class="hrmed"></div>
Editted
$("#firstnamesubmitbutton").click(function(){
$('.hrmed').delay(1000).queue(function () {
$(this).addClass('lineanimation').dequeue();
}).delay(2000).queue(function () {
$(".firstnamesection").addClass("animate fadeOut");
$(".firstnamesection").addClass("hidden");
$(".lastnamesection").removeClass("hidden");
$(this).removeClass('lineanimation');
alert("Code was executed");
});
});
.hidden {
display: none;
}
.lineanimation {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="firstnamesubmitbutton">Click</button>
<div class="hrmed">
<div class="firstnamesection">firstname</div>
<div class="lastnamesection">lastname</div>
</div>
I have a div and I'm trying to shrink it when I click a button. And when I click it again, I want it back to the original size. I'm using toggleClass for this, but I did something wrong with my code, and I'm not sure where. Please take a look. Thanks.
//*********************************************************************
<style>
div {
border: 1px solid black;
width: 500px;
height: 500px;
}
.shrink {
width: 250px;
height: 250px;
}
</style>
//*********************************************************************
<button type = "button"> click me </button>
<div> Can you tell me a secret? </div>
//*********************************************************************
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type = "text/javascript">
$(document).ready($function {
$("button").click(function(){
$("div").toggleClass("shrink");
});
});
</script>
//*********************************************************************
It's kind of a typo. You wrote "$function {" but you probably mean this:
$(document).ready(function() {
The rest is fine.
Also, document ready can be expressed in a shorter form:
$(function() {
...
...
});
Maybe you just confused those two. I did a few times too, back in my beginner days :)
Here: the jQuery ready method takes an anonymous function as an argument... so te problem with your code was only to pass that function function(){}
Here you can see the code in action: http://jsfiddle.net/leojavier/41wmck17/
$(document).ready(function() {
$("button").click(function(){
$("div").toggleClass("shrink");
});
});
I'm trying to slide a div from the left to the right side when the 'submit' button is clicked. After a little pause, the div would automatically slides back to it's original position. Currently it goes to the right side but it isn't coming back to the left corner.
CSS
#mainform{
position: absolute;
display: block;
padding-top:20px;
font-family: 'Fauna One', serif;
}
HTML
<div id="mainform">
<!-- Required div starts here -->
<form id="form">
<h3>Contact Form</h3>
<div class="hello"></div>
<input type="button" id="submit" value="Send Message"/>
</form>
</div>
JS
$(document).ready(function() {
$('#submit').click(function(e) {
reslide();
function reslide() {
$('#mainform').delay().animate({width: '510px', left: '1050'}, 600).delay(5000).animate({width: '510px', right: '1000px'}, 200, function() {
setTimeout(reslide, 3000);
});
}
$('.hello').fadeIn(1500);
$("<b>Successfully send</b>").appendTo(".hello");
$('.hello').fadeOut(2500);
});
});
When you give feedback to the user after/before submiting, try to use CSS3 Transform instead of actually moving/resizing the object.
function slide($obj) { // jQuery object of element
$obj.css("transform", "translateX (50px)");
setTimeout(function(){
$obj.css("transform", "none");
}, 5000);
}
To make it smooth (real animation) apply CSS3 Transition property.
<style>
.object {
transition: transform 0.6s;
}
</style>
Or you can shorten, if you're sure everything'd go smoothly.
function slide($obj) { // jQuery object of element
$obj.animate("transform", "translateX (50px)")
.delay(600).
.animate("transform", "translateX (0px)");
}
PS; in my expirience jQuery.delay(); wasn't always working with queueing animations, i'm not entirely sure why. As a matter of fact, this happened only sometimes. Sometimes tought it wasn't working
// not working
$("smth").animate({"rule":"val"}).delay(500).animate("rule":"val");
// working
$("smth").animate({"rule":"val"})
setTimeout(function(){
$("smth").animate({"rule":"val"})
}, 1000);
The reason it's not working is that, while you add right to the element, you also keep left with its original value, thus the element will not "come back". Add left: '', to the 2nd animate function and you should be good to go:
function reslide() {
$('#mainform').delay().animate({
width: '510px',
left: '1050'
}, 600).delay(5000).animate({
width: '510px',
left: '',
right: '1000px'
}, 200, function () {
setTimeout(reslide, 3000);
});
}
Here is a fiddle you can play with: http://jsfiddle.net/bv8dwaq2/
I've the following HTML
<div id="mrdiv"/>
<input type="button" style="position: absolute;top: 100px;"onclick="one();"></input>
<input type="button" style="position: absolute;top: 100px; left: 50px;" onclick="two();"/>
JAVASCRIPT
function one(){
$("#mrdiv").stop(true).animate({right: "+=214"},200);
}
function two(){
$("#mrdiv").stop(true).animate({left: "+=214"},200);
}
CSS
#mrdiv{
position:absolute;
background-color: black;
width: 100px;
height: 100px;
}
Last but not least: http://jsfiddle.net/25pYY/3/
For some odd reason, I can't understand why the buttons don't work but I guess the code is enough to understand what I want.
Basically, when I execute the animate functions the div animate properly but only in the first passage to the code. With this I mean that If I click the button one then two won't work, or vice-versa. I need them both to work and to do this repeatdly but I don't understand why they wont. Any ideas on this one? Sorry for the broken fiddle, I'll try and get it to work while waiting!
Your right and left values are competing with each other. You need to disable them as appropriate:
http://jsfiddle.net/isherwood/25pYY/9
function one() {
$("#mrdiv").stop(true).animate({
right: "+=14"
}, 200).css('left', 'auto');
}
function two() {
$("#mrdiv").stop(true).animate({
left: "+=14"
}, 200).css('right', 'auto');
}
It would be a good move to get your click handlers out of your HTML, like so:
http://jsfiddle.net/isherwood/25pYY/10
$(function () {
$('#mrdiv input').click(function () {
if ($(this).index() == 1) {
one();
} else {
two();
}
});
});
As I suspected, you actually wanted different behavior than what your code would indicate. Here's how you might keep the animations from jumping to the sides of the screen. Only animate one property:
http://jsfiddle.net/isherwood/25pYY/12
function one() {
$("#mrdiv").stop(true).animate({
left: "-=14"
}, 200);
}
function two() {
$("#mrdiv").stop(true).animate({
left: "+=14"
}, 200);
}
I'm making a collapsible treeView.
I made it all, I just need my + and - icons to toggle whenever they are clicked.
I did the part when I change an icon from + to -, on click, with jQuery with the following code:
$(this).attr('src','../images/expand.gif');
Problem is, I don't know how to make it go other way around, when i click on the node again :)
This should work:
<style>
.expand{
content:url("http://site.com/expand.gif");
}
.collapse{
content:url("http://site.com/collapse.gif");
}
</style>
<img class="expand">
<script>
//onclick code
$('img.expand').toggleClass('collapse');
</script>
Look for jquery function toggleClass :)
http://jsfiddle.net/Ceptu/
Html:
<div id="box">
Hello :D
</div>
Jquery:
$("#box").click(function () {
$(this).toggleClass("red");
});
Css:
#box {
width: 200px;
height: 200px;
background-color: blue;
}
.red {
background-color: red !important;
}
Remember that !important is realy important!!!
Lots of ways to do this :D
I wanted to do this without making classes. Inside your click event function, you could do something like this:
if($(this).attr('src') == '../images/collapse.gif')
$(this).attr('src', '../images/expand.gif');
else
$(this).attr('src', '../images/collapse.gif');
add plus as a default img src then define a minus-class to change the image source to minus image
$("selector_for_your_link").click(function () {
$(this).toggleClass("minus-class");
});