Firstly thank you for accepting me in the group.
I need help with a question about animation with jQuery.
This is an animation which I found on items in the navigation menu of this template, the template monster.
http://www.templatemonster.com/demo/40492.html
Apparently these are two images that move on the canvas and gradually fade at some point.
Studying examples of jQuery I saw that part of the effect is obtained with the use of animation attribute top (css). But unfortunately the element that I animated do not gradually disappears as the example shown in the link.
Please help me understand how I can achieve the same effect using jQuery.
You can simply make it as per below.
CSS
#font-face {
font-family: 'Six Caps';
font-style: normal;
font-weight: 400;
src: local('Six Caps'), local('SixCaps'), url(http://themes.googleusercontent.com/static/fonts/sixcaps/v5/tMrhQDUBAHnnGuM33-yobPesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
.clear{clear:both;}
.nav{}
.menubox{width:200px;float:left;margin:0px 10px;height:80px;overflow:hidden;position:relative;font-family: 'Six Caps', sans-serif;line-height: 80px;color: #161616;font-size: 80px;color:#000;display:block;cursor:pointer;}
.menubox > span{width:100%;height:80px;display:block;position:absolute;text-align:center;}
.menubox > span.default-txt{top:0px;left:0px;}
.menubox > span.hover-txt{top:80px;left:0px;color:red;}
HTML
<div class="nav">
<a class="menubox">
<span class="default-txt">menu</span>
<span class="hover-txt">menu</span>
</a>
<a class="menubox">
<span class="default-txt">menu</span>
<span class="hover-txt">menu</span>
</a>
<a class="menubox">
<span class="default-txt">menu</span>
<span class="hover-txt">menu</span>
</a>
<a class="menubox">
<span class="default-txt">menu</span>
<span class="hover-txt">menu</span>
</a>
<div class="clear"></div>
</div>
jQuery
$(document).ready(function(){
$('.menubox').mouseenter(function(){
$(this).children('.default-txt').stop(true,true).animate({top:'-100px'});
$(this).children('.hover-txt').stop(true,true).animate({top:'0px'});
}).mouseleave(function(){
$(this).children('.default-txt').stop(true,true).animate({top:'0px'});
$(this).children('.hover-txt').stop(true,true).animate({top:'100px'});
});
});
JSFiddle
Working Demo
Here's a simple example: http://jsfiddle.net/qtdtL/. Note the that element with the animation for "top" has position: fixed.
$("nav").click(function() {
var el = $(this);
var elTop = el.position().top == 0 ? "-70px" : "0";
el.animate({top: elTop});
});
Basically you add
div
{
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease; /* Safari */
}
first property tells what kind of changes that should be animated on change the second one tell how long time it should take and the third one timing, there's also a fourth for giving it a delay if so is desired
Related
I have a div with some content in it, and I am showing a button with jQuery. I want to fade it in thus I used:
setTimeout(function() {
jQuery('#button').css('opacity', 1);
}, 100);
First, on html, I have set the button's html to display:none; opacity: 0 I have achieved showing/hiding button, however when it shows, it's making the div stretch instantly. Instead, I want the parent div to expand with transition.
I have created a Fiddle: https://jsfiddle.net/atg5m6ym/7450/ . In this example, when I press the trigger button, I want the button to fade in as well as applying transition on the parent div.
For optimal performance, when using transitions and animations in CSS, you should stick to opacity and transform instead of display: none; and width/height.
Will quote the comment I stated above:
The way you designed this is not ideal, you should not be using
display: none; in transitions or animations. This will cause redrawing
in your browser, and you cannot transition properties with binary
settings, display just switches between states (ex: none/block), not
between values like opacity does.
What you could do is separate your content, sharing the same background color to simulate it is the same container.
Then use transform and the scale() function.
Code Snippet:
jQuery('#trigger').click(function() {
jQuery('.bottom-content').addClass('open');
})
.top-content,
.bottom-content {
background-color: lightblue;
}
.bottom-content {
transform: scaleY(0);
transition: transform 250ms ease-in;
transform-origin: top;
}
.bottom-content.open {
transform: scaleY(1);
}
.bottom-content.open #otherButton {
opacity: 1;
}
#otherButton {
margin-top: 20px;
opacity: 0;
transition: opacity 10s;
transition-delay: 250ms;
/* Separated for clarity purposes, wait for parent transition to end before starting this one*/
}
<script src="https://www.addressfinder.co.nz/assets/v2/widget.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="content">
<section class="top-content">
<button id="trigger">
Trigger
</button>
<br />Lalala La
<br />Lalala La
<br />Lalala La
<br />
</section>
<section class="bottom-content">
<button id="otherButton">
Test Btn
</button>
</section>
</div>
</div>
The accepted answer is overkill. Just use .fadeIn() and forget the opacity and transition settings completely. If you want to have the div expand separate from the button, just apply the effect to the div and then trigger the button effect at the end of the div effect. This snippet does the same thing as the accepted answer without any of the CSS troubles:
$(function(){
jQuery('#otherButton').hide();
jQuery('#two').hide();
});
$('#trigger').click(function() {
$('#two').slideDown(2000, function(){
$('#otherButton').fadeIn();
});
})
#container, #two {
background-color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="container">
<div id="content">
<button id="trigger">Trigger</button>
<br>
Lalala La<br>
Lalala La<br>
Lalala La<br>
<div id="two">
<button id="otherButton">Test Btn</button>
</div>
</div>
</div>
You can combine the jquery:
jQuery('#trigger').click(function() {
jQuery('#otherButton').slideDown(300).css('opacity', 1);
})
Note that I used the slideDown() function rather than show(). Using a transition function allows you to set an execution time. show() simply toggles the css display property, but you can not transition the display property.
Updated Fiddle
Instead of adding CSS with jQuery, you can simply add a class instead.
Set this class to whatever properties you want on it, us as:
.is-visible {
opacity: 1;
}
Example Fiddle: https://jsfiddle.net/atg5m6ym/7456/
Now, CSS doesn't like to transition when switching display: none; so instead I have simply set the height: 0; and only applied necessary styling on the .is-visible class.
I want my divs to change colour upon hovering over them, but the code is not executing even when I'm hovering. I'm not completely sure why, but I think there could possibly be an issue with the fact that I'm using a z-index on the class I want to hover over.
Html with script:
$(".eventContents").hover(
function() {
$(".eventContents").css("background-color", "yellow");
})
//making events square
var cw = $('.eventContain').width();
$('.eventContain').css({
'height': cw + 'px'
});
.eventContain {
position: relative;
margin-bottom: 10px;
z-index: -1;
background-size: cover;
}
.eventContents {
color: white;
padding: 5px;
position: absolute;
bottom: 0;
left: 0;
}
.eventContents h2 {
font-size: 2em;
font-family: 'Montserrat', sans-serif;
}
.eventContents p {
font-size: 1em;
font-family: 'Roboto', sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="events">
<row>
<div class="col-sm-4">
<div class="eventContain" style="background-image:url(img/events/leaf.jpg)">
<div class="eventContents">
<h2 class="eventName">Title of Event</h2>
<p>short description goes about here.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="eventContain" style="background-image:url(img/events/12.jpg)">
<div class="eventContents">
<h2 class="eventName">Title of Event</h2>
<p>short description goes about here.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="eventContain" style="background-image:url(img/events/1.jpg)">
<div class="eventContents">
<h2 class="eventName">Title of Event</h2>
<p>short description goes about here.</p>
</div>
</div>
</div>
</row>
</section>
Here is the fiddle, the issue is more prominent here:
https://jsfiddle.net/jakexia72/x7jLp17z/#&togetherjs=os0pjD0RNr
It seems to work for me, if I understood correctly, but here's a way to hover both on and off and use this instead of .eventContents twice more..
$('.eventContents').hover(
function() {
$(this).css('background-color', 'yellow');
},
function() {
$(this).css('background-color', 'red');
}
);
fiddle
https://jsfiddle.net/Hastig/4fjn0ndb/1/
The elements are being correctly hovered and the code is getting executed I've tested it, the problem is maybe that your elements are position:absolute; and they're all in top of each other, also they don't have a defined height and it's necessary because we are talking about div elements not img, maybe you'd want to check out your code a little bit better.
You'll want to put a top:0px; to your .eventContents because it's hidden on top (at least for this example)
One last thing, if you want to refer to the actual hovered element, you should use $(this) instead of the class name because it'll execute the code for all the elements with the class and not only the hovered one.
The negative z-index is the reason why the hover is not working, to fix it, make sure that the z-index of the element you want to hover over is positive. To avoid affecting the top nav bar, move the nav bar to the bottom of the html code file allowing it to naturally appear on top of everything else, avoiding the need to use a negative z-index on eventContain.
I have this html
<div>
<span data-disabled class="myclass"> like </span>
<span class="myclass"> unlike </span>
</div>
scss is like this
myclass{
visibility: visible;
cursor: pointer;
&[data-disabled] {
visibility: hidden;
}
}
and based on click I am doing this
this.select('like').attr('data-disabled', true);
this.select('unlike').removeAttr('data-disabled');
It is working fine but my like and unlike are shown next to each other and they hide and become visible at their original position.
Is there any way to have same position and when I hide and unhide then they overwrite each other.
The problem is with the visibilty property you are using. You have to use display:none so that the item will not consume the space when hidden.
instead of
visibility: hidden;
use
display: none;
You can read more about it here.
Try JQuery Toggle function to achieve this task:
$(function(){
$(".myclass").click(function () {
$(".myclass").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<span class="myclass"> like </span>
<span class="myclass" style="display:none"> unlike </span>
</div>
I want to have an arrow pointing to the right to allow the user to expand the sidebar, and then change that glyphicon to point to the left. That way, it points to the left so that they understand how to hide the sidebar. I then want it to change back to its default state.
This is what I have currently:
<div id="page-content-wrapper">
<div class='hidden-lg'>
<div class="content-header">
<h1>
<a id="menu-toggle" href="#" class="btn btn-default"><i class="glyphicon glyphicon-arrow-right"></i></a>
</h1>
</div>
</div>
Just use:
$('#menu-toggle').click(function(){
$(this).find('i').toggleClass('glyphicon-arrow-right').toggleClass('glyphicon-arrow-left');
});
Fiddle Example
Try
$('#menu-toggle').on('click', function(){
var iSelector = $(this).find('i:first');
if(iSelector.hasClass('glyphicon-arrow-right')) {
iSelector.removeClass('glyphicon-arrow-right')
iSelector.addClass('glyphicon-arrow-left')
}
});
Fiddle
Reference:
selectors
on
hasClass
removeClass
addClass
I guess there is a better way to address this common problem is using CSS's pseudo classes like
:after
For example
.panel-heading .accordion-toggle:after {
font-family: 'Glyphicons Halflings';
content: "\e114";
float: right;
color: grey;
transition: transform 0.5s;
transform-origin: 8px 7px;
}
And below code for rotating glyphicon
.panel-heading .accordion-toggle.collapsed:after {
transform: rotateZ(180deg);
}
Please note: font-family and content may be different if you are using other than bootstrap css library. Also pay attention to the classes decorated or used for your panel.
Reference
I have a page setup with a hidden column using the jQuery show() and hide() functions to slide the column in and out.
However it's kind of "clunky" and does not look very smooth when showing/hiding; in contrast I also have a section of the page using jquery UI accordion. When switching between these sections the transition looks very nice and smooth...
Is there a better function than show()/hide() which looks as nice as the accordion does? (maybe the "easing" parameter can be used in the show/hide functions, but i'm not sure how to use this properly?)
I guess you will want to use jQuery.fadeIn and jQuery.fadeOut
Also look at jQuery.slideToggle.
I'm not a big fan of JQuery UI's animation. I have the same problem when trying to animate my show()/hide()... the result is choppy. I ended up using Scriptaculous for most of my animations simply because it provides smoother animations and more configurable than what JQuery UI provides. Scriptaculous can do what JQuery provides, plus more.
you could use FadeOut() FadeIn() or slideDown slideUp . Make the duration is "slow" or in time
For more information: Sliding effect
Here is another way by using animate()
http://www.vietanime.net/
the code example here:
// SLIDE FOOTER MENU
$('#footer-menu > li').hover(
function () {
var $this = $(this);
$('a',$this).stop(true,true).animate({
'bottom':'-45px'
}, 300);
$('i',$this).stop(true,true).animate({
'top':'-10px'
}, 700);
},
function () {
var $this = $(this);
$('a',$this).stop(true,true).animate({
'bottom':'-145px'
}, 300);
$('i',$this).stop(true,true).animate({
'top':'50px'
}, 400);
}
);
and the html here:
<div id="bottom-slide-out-menu">
<ul id="footer-menu">
<li>
<a>
<i class="icon_about"></i>
<span class="title">Search</span>
<span class="description">Direct link, Mp3, Music, Video, Tutorials</span>
</a>
</li>
<li>
<a>
<i class="icon_work"></i>
<span class="title">Listen</span>
<span class="description">Mp3</span>
</a>
</li>
<li>
<a href="archive.php">
<i class="icon_help"></i>
<span class="title">Archive</span>
<span class="description">Direct Links Archive</span>
</a>
</li>
<li>
<a href="search.php">
<i class="icon_search"></i>
<span class="title">Developer</span>
<span class="description">Keywords, SEO, Website </span>
</a>
</li>
</ul>
</div>
and some little css you could make it beautiful:
ul#footer-menu{
list-style:none;
position:absolute;
bottom:0px;
left:20px;
font-size:36px;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
color:#999;
letter-spacing:-2px;
}
ul#footer-menu li{
float:left;
margin:0px 10px 0px 0px;
}
ul#footer-menu a{
cursor:pointer;
position:relative;
float:left;
bottom:-145px;
line-height:20px;
width:210px;
}
ul#footer-menu a:hover{
text-decoration: none;
}