Animate each text lines - javascript

$("span").click(function(){
$("div").fadeToggle();
});
$("span").click( function(){
$("a").css({ opacity: '0' });
$(".text1").delay(200).animate({ opacity: '1' });
$(".text2").delay(400).animate({ opacity: '1' });
$(".text3").delay(600).animate({ opacity: '1' });
});
I want to animate my text in the following way:
When you click on the "CLICK HERE" text, the links in the pink div should animate. Each line should fade in, one after the other.
However, I think my code is wrong, because if you click the "CLICK HERE" text several times in quick succession, animation build up occurs.
How should I fix this?
http://jsfiddle.net/XdLzp/

Did you try somthing like this
$("span").click(function(){
$("div").fadeToggle();
});
$("span").click( function(){
$("a").css({ opacity: '0' });
$(".text1").animate({ opacity: '1' },function(){
$(".text2").animate({ opacity: '1' },function(){
$(".text3").animate({ opacity: '1' });
});
});
});

You have to stop the animation queue on the items e.g.
<a class="content-toggle" href="#">CLICK HERE</a>
<div class="content">
<div>TEXT 1</div>
<div>TEXT 2</div>
<div>TEXT 3</div>
</div>
$('.content-toggle').on('click', function(e) {
e.preventDefault();
var content = $('.content');
// Stop any ongoing animations and hide children.
content.finish().children().finish().hide();
content.fadeToggle(400, 'swing', function() {
animateChildrenIn(content);
});
});
function animateChildrenIn(parent) {
parent.children().each(function(i) {
$(this).delay((i + 1) * 200).fadeIn(800);
});
}
Fiddle: http://jsfiddle.net/4RW5d/

Related

Limit hover action to it's specfic children only jQuery 2.1.3

I'm trying to limit the hover action to it's specific child element.
i.e.
when I hover over Image Here, only 1 million Team and wordpress should appear and when I hover over Image Here # 1, only 2 million Team and wordpress should appear.
see link
jQuery 2.1.3
jQuery('doucment').ready(function () {
jQuery('.b29_work_img').hover(function () {
jQuery('.b29_work_hover').css({
opacity: 0.8
});
}, function () {
jQuery('.b29_work_hover').css({opacity: 0});
});
});
HTML
<!-- our work -->
<div id="b29_our_work">
<div class="b29_container">
<div class="b29_row">
<div class="b29_col b29_col_3 b29_work">
<div class="b29_row">
<div class="b29_col b29_col_3 b29_work_img">
<h1>Image HERE</h1>
<div class="b29_work_hover">
<h4>1 Million Teams</h4>
<h5>Wordpress</h5>
</div>
</div>
<div class="b29_col b29_col_3 b29_work_img">
<h1>Image HERE # 1</h1>
<div class="b29_work_hover">
<h4>2 Million Teams</h4>
<h5>Wordpress 4.3</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.b29_work_hover {
opacity:0;
}
You need to change your selector:
jQuery('.b29_work_hover', this)
or you can use .find() method:
jQuery(this).find('.b29_work_hover')
What is the issue?
jQuery('doucment') should be jQuery(document)
You are targeting all of the elements with .b29_work_hover class name.
You have not given the context of the selector which is this.
Note:
All the class selector in js like document.getElementsByClassName("className") or a library like jQuery $(".className") always returns a list of all the elements available on the page.
Replace this:
jQuery('.b29_work_img').hover(function () {
jQuery('.b29_work_hover').css({
opacity: 0.8
});
}, function () {
jQuery('.b29_work_hover').css({opacity: 0});
});
by this:
jQuery('.b29_work_img').hover(function () {
jQuery(this).find(".b29_work_hover").css({
opacity: 0.8
});
}, function () {
jQuery(this).find(".b29_work_hover").css({opacity: 0});
});
Here is the JSFiddle demo
Basically you use this and find to find the element under the currently hovered element and change the opacity.
jQuery('.b29_work_img:first').hover(function () {
jQuery(".b29_work_hover:first").css({
opacity: 0
});
jQuery(".b29_work_hover:last").css({
opacity: 0.8
});
});
jQuery('.b29_work_img:last').hover(function () {
jQuery(".b29_work_hover:first").css({
opacity: 0.8
});
jQuery(".b29_work_hover:last").css({
opacity: 0
});
});
Here is the answer, I think you want to see that when you hover over one image, it's parent element should appear.
jQuery('doucment').ready(function () {
jQuery('.b29_work_img').hover(
function () {
jQuery(this).children('.b29_work_hover').css({
opacity: 0.8
});
},
function () {
jQuery(this).children('.b29_work_hover').css({opacity: 0});
});
});

Jquery animate opacity and margin on other element

I have an link that when clicked, has to show 2 other links.
But when I click my link, nothing happends. Really nothing.
I have loaded in jquery before I have my script.
This is my jquery script:
$("#imd").toggle(function(){
$("#anw").animate({opacity:1},200);
$("#3d").animate({marginTop:75}, 200);
},function(){
$("#anw").animate({opacity:0},200);
$("#3d").animate({marginTop:0}, 200);
});
This is my CSS:
#anw {
width: 50%;
background-color: #0f0;
opacity: 0;
}
And this is my HTML markup
<div class="mid">
<h1>Interactive Media Design</h1>
<div id="anw"><br><a class="left" href="website.html">Apps</a><a class="right" href="website.html">Websites</a></div>
<hr>
<h1 id="3d"><a href="#">3D Modelling</h1>
</div>
<div class="bottom">
<h1>Contact and about me</h1>
</div>
My apologies if this is a very dumb question, but I have no clue.. Also the documentation I can find is not filling my needs.
You need to work with a click handler:
$("#imd").click(function(){
$("#anw").toggle(function(){
$(this).animate({opacity:1},200);
}, function() {
$(this).animate({opacity:0},200);
});
$("#3d").toggle(function() {
$(this).animate({marginTop:75}, 200);
},function() {
$(this).animate({marginTop:0}, 200);
})
});
See the Fiddle: https://jsfiddle.net/8Lpvty1w/
Working fiddle for what you want to do: https://jsfiddle.net/rr9Lvjgh/
Essentially:
$("#imd").on('click', function(){
// code to change stuff here
});

jQuery: addClass and click function for this class

I have 2 click functions set up, the first one allows you to click and scroll through the .test divs. After this the .test:last-child is targeted to remove the red class, add the blue class and then fire a click function on the blue class div, and hide it. Only problem is it doesn't seem to recognise the click function on the .blue div and isn't working.
jsFiddle demo:
http://jsfiddle.net/neal_fletcher/adMYV/1/
HTML:
<div class="test red"></div>
<div class="test red"></div>
<div class="test red"></div>
<div class="test red"></div>
<div class="test red"></div>
jQuery:
$(document).ready(function () {
$(".red").click(function () {
var next;
next = $(this).nextAll(".test");
$('html, body').animate({
scrollTop: next.offset().top
}, "slow");
return false;
});
});
$(document).ready(function () {
$('.test:last-child').removeClass('red').addClass('blue');
$('.blue').click(function () {
$(this).hide();
return false;
});
});
Any suggestions would be greatly appreciated!
Try like this:
http://jsfiddle.net/adMYV/3/
CODE
$(document).on("click", ".blue", function () {
$(this).hide();
return false;
});
You can do the click event on the .test selector.
And in the click function event to user hasClass jquery function and act as you want in each case.
EDIT:
Like this:
$(document).ready(function () {
$(".test").click(function () {
if($(this).hasClass('red')) {
var next;
next = $(this).nextAll(".test");
$('html, body').animate({
scrollTop: next.offset().top
}, "slow");
} else if($(this).hasClass('blue')) {
$(this).hide();
}
return false;
});
$('.test:last-child').removeClass('red').addClass('blue');
});
Take a look http://jsfiddle.net/adMYV/4/

Div fading in and out

I need your help, I am working on a website where I want a div to delay for 2 seconds then fade in when another div is clicked, but when I want to click it again (to close it) I want it to fade out instantly. Any help?
If you can use Jquery, the following code will help you do it as i got what you want:
this is default css:
.invisElem{display:none}
and the jquery code:
$('body').on('click', '.boxbutton1', function(){
var counter = $(this).data('count');
if(counter == undefined){
counter = 0;
setTimeout(function() {
$('.gymtext').fadeIn(500)//fadeIn after 2 seconds(2000 ms)
}, 2000);
}
else if(counter == 0){
$('.gymtext').fadeOut(function(){
$('.gymtext').remove()
});//fadeout quickly then remove
}
})
i tried to write it down novice friendly if you needed help add comment
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div").fadeToggle(240);
});
});
</script>
<button>Click to fade DIV</button>
<div id="div" style="width:100px;height:100px;background-color:blue;"></div>
Html:
<div>Show div1 and hide div2</div>
<div id="div1">Div1</div>
<div id="div2">Div2</div>
Css:
#div2 {display:none;}
Jquery:
$('#btn').click(function(e){
$('#div1').fadeOut('slow', function(){
$('#div2').fadeIn('slow');
});
});

how to auto slide toggle without click function

I would like the first div to appear and hide and then the next div should show up and again hide for every 5 seconds automatically. Currently this code is in Slide up but how to change it to toggle effect
here is the jsfiddle:
http://jsfiddle.net/dN4SN/
javascript code is here :
$(function() {
$("#slideContainer").css({
"height" :$("#slideContainer div:first").css("height"
"overflow" : "hidden"
});
function slide() {
$("#slideContainer div:first").slideUp(800, function() {
var $this = $(this);
$this.parent().append(this);
$this.show();
slide();
});
}
slide();
});​
html is here:
<h1>Test of sliding stuff</h1>
<div id="slideContainer">
<div>Contact No: 555-666-7777</div>
<div>Email: me#me.com</div>
<div>Test: whatever</div>
<div>Add as many extra lines here as you like</div>
</div>
<div>Other page content here.</div>​

Categories