jQuery Slide toggle and fade in issue - javascript

http://www.kflap.com/articles.php?id=2
As you can see when clicking on a number, the title fades in alright but the text just appears below instead of sliding into place. When closing however, the text slides back perfectly. I understand this may be a weird technicality due to the fade in and slide toggle being related.
JQUERY
$(document).ready(function(){
$(".revealHeader").click(function(){
$(".revealTitle", this).fadeIn("fast");
$(this).nextAll(".revealText").first().slideToggle();
});
});
HTML
<div id="reveal">
<span class="revealHeader">10. <span class="revealTitle">EXAMPLE</span></span>
<span class="revealText"><img src="EXAMPLE.JPG" /></span>
Please be aware I am terrible with jQuery as I stupidly never bothered to learn it properly. (Feel free to tear apart my code.)

try this... This will execute the slide AFTER the fade is finished.
$(".revealTitle", this).fadeIn("fast", function(){
$(this).nextAll(".revealText").first().slideToggle();
});
if you really want them both done at the same time, I think you will need to split the content into 2 containers. One for fading and one for scrolling.

Related

How to make a large section of html fade using jQuery?

I am using html right now and I want to make my whole page fade in and fade out on a command through jQuery (whether its click animate etc...).
I thought of using a large fixed div over everything but won't that obscure everything else being clicked?
I also thought I could wrap everything in a span but that won't work.
Finally, I understand I can fade "body", but sometimes I want to fade large sections specifically within the body. Thank you for your help.
You may wanna use ids
<div id="object">content</div>
<script> $("#object").fadeOut(); </script>
Or with classes:
<div class="object">content</div>
<script> $(".object").fadeOut(); </script>

Swiper JQuery if statement involving .hasClass and .toggleClass

Without writing a novel of a backstory, using Swiper, I'm trying to call .toggleClass on an HTML element, whenever one of my swiper slides has the class of swiper-slide-active. This is so that I can have text appear on single slides, instead of all slides at the same time.
Here is a visual of what I'm describing: studioyonis.com — if you click the caption at the bottom so that the project information comes up, then drag RTL, you'll notice that the project information for the second project was also visible for a short time. It disappears (correctly) because of some other code I have, but l would like it to not appear at all (until I click the caption on that slide).
I've been trying this if statement to single out the active slide and help set up a subsequent click function, but its not working and I can't figure it out for the life of me. Can JQuery, for some reason, not see the swiper-slide-active when it happens?
if ($('.swiper-slide').hasClass('swiper-slide-active')) {
$('.overlay-caption', this).toggleClass('overlay-caption-active');
$('.overlay-caption-box', this).toggleClass('overlay-caption-box-active');
};
Here is a sample of my HTML structure. There are ~7 different slides like this, all with overlay-caption and overlay-caption-box classes.
<div class=“swiper-slide”>
<div class=“caption-box information-00”>
<a class=“caption links”>
Text Text Text Text Text Text
</a>
<div class=“overlay-caption-box”>
</div>
</div>
<div class=“overlay-caption”>
<div class=“project-information”>
Text Text Text Text Text Text Text Text Text Text Text Text
</div>
</div>
</div>
Hopefully this makes sense! Been a long 10-12 hours of work on this site today, only to realize this problem near the end of the night.
Cheers!
Instead of changing the display, I just locked swiping to different slides while the project information is visible. That way the user doesn't know all of the captions are open because s/he can't scroll to them. This forces the user to slow down and look at each project, instead of quickly swiping through. Since its a portfolio site, maybe thats a good thing in this case.

css z-index changes during opacity animation

I have a very simple page, there are a few stacks of divs and each div has and image inside of it.
Each stack will fadeIn depending on the scroll position, the top stack has an object that overlaps the bottom stack and for some reason during the animation, the z-index changes.
here's the JSBIN, try clicking the fadeIn/fadeOut button and notice how the plate briefly went behind the bottom stack when it's transitioned.
http://jsbin.com/wefediti/1/
please help.
Since your jQuery.each() and therefore the fading animation will be processed synchronously, it is not possible with your approach to make them fade at the very same time.
I suggest you combine those images in the same div and fade them if it is possible for you:
DEMO
function fadePages(num) {
$(".page").animate({
opacity: num
}, 1000*(num+1));
}
do same at same time. It works.
It's a thing of positioning of your divs
I edited. All you need to do is stack your divs right and then re-edit your absolute position. But it works
EDITED CODE
Let me be more specific.
change the order of your divs liek so:
<div class="page1">
<img src="http://i.imgur.com/BleOC.jpg">
</div>
<div class="page">
<div class="bg"></div>
</div>
and that will fix you z-index problem. I made a different call for each div from the JS as well, But that was for testing purposes. I think you're fine with one call
I made the positioning edits as well HERE
But it seems like everyone is modifying it, so hurry up before someone else messes it up lol

Rough Animation

Anyone know why the animation is rough (doesn't really animate) on this bit of jquery?
$('.close').click(function() {
$('.hidden-content').fadeOut('fast', function (){
$('.serv-button').fadeIn('fast');
});
});
Basically when you click on the close button a ".hidden-content" should fade out and the "serv-button"'s should fade in. But instead they just appear and do no fade. Here is my working example, it's on the services section:
http://www.hdesignonline.com/qdup/
Basically I need the content to fade out exactly how it fades in...
It looks like it's fading each individual block. If you made a wrapper to go around all of them, and had that fade instead of the individual blocks, it would end up much smoother.

Content box on image hover?

I have a bunch of images in a gallery on a new website im building and Im wanting to have content displayed when a user hovers over an image.
For example if a user hovered over a picture of a car in my gallery then a low opacity content div would fade over the entire image to show text and maybe a link.
I presume this effect could be done with a bit of JS or even CSS Transitions to give the fade.
I just need to know how to make a content box appear over the image on hover, possibly at 80% opacity.
Heres an example of what I have in mind:
Thanks for the help, if anyone could point me in the right direction it would be appreciated.
I can post more information if needed.
This is somewhat simple way of implementing a hover show and hide with jquery.
Working example: http://jsfiddle.net/va2B8/2/
jQuery ( http://jquery.com/ ):
$(document).ready(function() {
$("#Invisible").hide()
$("#hoverElement").hover(
function () {
$('#Invisible').stop().fadeTo("slow", 0.33);
},
function () {
$('#Invisible').stop().fadeOut("slow");
}
);
});
html:
<p id="hoverElement">This little piggy will show the invisible div.</p>
<div id="Invisible">This is the content of invisible div.</div>
css:
#Invisible { background: #222; color: #fff; }
Edit: I changed url for the working example cause i forgot to fade out on mouse out.
Edit2: Changed url again and changed the code cause i had some extra code there.. plus i thought that i might as well add those two .stop() in there so that it stops the animation If the mouse over or mouse out occurs while animation is going on.
( Without the stops one could hover in and out several times and then when he would stop, the animation would still keep going till it has done each animation as many times as he triggered it. You can test that in here http://jsfiddle.net/va2B8/1/ )
You can start using this fiddle :
http://jsfiddle.net/Christophe/2RN6E/3/
1 div containing image and span like :
<div class="image-hover">
<img src="" />
<span class="desc">text to be displayed when imae hover</span>
</div>
Update
All can be done with CSS...
http://jsfiddle.net/Christophe/2RN6E/4/
Here's an easy jQuery plugin you can implement: http://file.urin.take-uma.net/jquery.balloon.js-Demo.html
It works like this:
$(function() {
$('img').balloon(options);
});
This jQuery applied the balloon function to all images on the page. Here's your HTML:
<img src="example.png" alt="Here's your caption." />
The text in the balloon is going to be whatever is in the alt attribute for images and whatever is in the title attribute for other tags.
I've just done this:
http://twostepmedia.co.uk
It uses hoverintent jquery plugin so there is a delay of 250ms after the user hovers over to avoid erratic hover behaviour.

Categories