Please look at the next fiddle and help me understand why in Firefox, the alerts aren't fired.
HTML
<div class="test1">TEST1</div>
CSS
.test1 {
opacity: 0;
width: 300px;
height: 150px;
background-color: blue;
transition: opacity 0.2s 0 ease-in;
&.fade-in {
opacity: 1
}
}
JS
$(".test1").ready(function(){
$(".test1").one("webkitTransitionEnd transitionend MSTransitionEnd oTransitionEnd transitionEnd", function(event){
alert("transition fired");
if ( event.target == event.currentTarget ) {
alert(event.target);
}
});
setTimeout(function(){
$(".test1").addClass("fade-in");
},1000);
});
Updated code and fiddle
add -moz- at defor of animation property
-moz-transition: PROPERTY or CSS CLASS NAME .3s ease;
example:
-moz-transition: width .3s ease;
-moz-transition: fade-out .3s ease;
Related
I dont get the fade of the background picture to work in Firefox but any other Browser. Help is appreciated!
Just click on the image.
$(document).ready(function(){
$(".click_me").click(function(){
$('.click_me').css('background-image', 'url(https://placekitten.com/500/500)');
});
});
.click_me {
height:500px;
width:500px;
opacity: 1.0;
background-image: url(http://placekitten.com/g/500/500);
-webkit-transition: background-image 700ms linear;
-moz-transition: background-image 700ms linear;
-o-transition: background-image 700ms linear;
-ms-transition: background-image 700ms linear;
transition: background-image 700ms linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click_me"></div>
Since you are using jQuery already why don't use its animate function instead of CSS transitions, this will do the trick for you very easily.
$(document).ready(function() {
$(".click_me").one('click', function() {
$(this).animate({
opacity: 0
}, 'fast', function() {
$(this)
.css({
'background-image': 'url(https://placekitten.com/500/500)'
})
.animate({
opacity: 1
});
});
});
});
.click_me {
height: 500px;
width: 500px;
opacity: 1.0;
background-image: url(http://placekitten.com/g/500/500);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click_me"></div>
When I scroll and the anchor touches the top of the window, the background color of the box is supposed to change but I can't seem to get it to work properly.
https://jsfiddle.net/6p2pnnq4/1/
var scrollFn = function() {
var targetOffset = $(this).find(".anchor-point")[0].offsetTop;
console.log('Scrolling...');
if ($(this).scrollTop() > targetOffset) {
$(this).find(".footer_wrap").addClass("topper");
} else {
$(this).find(".footer_wrap").removeClass("topper");
}
};
$(window).scroll(scrollFn);
You don't need the
$(this).find
It is useless, try the following:
var targetOffset = $('#footer_wrap').offset().top,
$window = $(window);
$(window).on( 'scroll', function(){
if ( $window.scrollTop() >= targetOffset ) {
$("#footer_wrap").addClass("topper");
}else{
$("#footer_wrap").removeClass("topper");
}
});
And The CSS
#footer_wrap {
margin-top: 200px;
height: 130vmax;
background-color: #f4f4f4;
-ms-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
#footer_wrap.topper {
background-color: #000;
}
Then when #footer_wrap is at the top it will change the background.
Check out the Fiddle
So, I touch css property 'max-height' of me categories list using js.
In first case when list is not full opened transition works fine.
In second case when I need to hide some part of list, css transition start like with delay.
.category_list>ul {
display: inline-block;
text-align:left;
overflow: hidden;
word-wrap: break-word;
width: 170px;
transition: max-height 1s ease-out;
-webkit-transition: max-height 1s ease-out;
-moz-transition: max-height 1s ease-out;
-o-transition: max-height 1s ease-out;
}
$('body').on('click','.full_category_list>span',function(){
if ($(this).text()=='open list') {
$(this).parent().parent().find('ul').stop().css('max-height','500px');
$(this).text('hide list');
} else {
var ul = $(this).parent().parent().find('ul');
console.log($(ul).attr('data-height'));
$(ul).stop().css('max-height',$(ul).attr('data-height'));
$(this).text('open list');
}
});
How to say to list hide right now? Please help me :)
Lik to fiddle here fiddle
So, decision is so simple!
Need to open list on its childrens sum height. Right code:
$('body').on('click','.full_category_list>span',function(){
if ($(this).text()=='open list') {
var ul = $(this).parent().parent().find('ul');
$(ul).stop().css('max-height',$(ul).attr('data-fullheight'));
$(this).text('hide list');
} else {
var ul = $(this).parent().parent().find('ul');
$(ul).stop().css('max-height',$(ul).attr('data-height'));
$(this).text('open list');
}
});
And lik to updated fiddle fiddle
Thanks #vel !!!
Updated fiddle - no need JS!!!
Fix delay solution:
Put cubic-bezier(0, 1, 0, 1) transition function for element.
.text {
overflow: hidden;
max-height: 0;
transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
&.full {
max-height: 1000px;
transition: max-height 1s ease-in-out;
}
I am trying to create a similar effect as in the site http://tracelytics.github.io/pageguide/ where when you hover the mouse on the "Page guide" icon present in left side of screen, it extends further and show another level of information along with it.
How can I get this effect? I also want to use the same icon.
I don't know where to start on this. Any sample fiddle or plugin will help me. Thanks.
http://jsfiddle.net/fenderistic/SqjfT/
Here's a very simple implementation I created that simulates what you see in that plugin.
var old;
$(".hover").hover(
function(){
old = $(this).css("right");
$(this).animate({right:"0"},100);
}, function() {
$(this).animate({right:old},100);
}
)
You can do this with css and only jquery to open the modal. This post first will have the css only (I did not put the image, but if you have some css knowledge you can add your own image).
http://jsfiddle.net/cornelas/9sH3v/
body {
overflow: hidden;
}
#page_tab {
background: #ccc;
width: 150px;
height: 50px;
position: absolute;
right: -5em;
transition: all .5s ease;
}
#page_tab:hover {
right: 0;
transition: all .5s ease;
}
<div id="page_tab"></div>
HERE IS THE JQUERY
http://jsfiddle.net/cornelas/9sH3v/1/
$('#page_tab').click(function () {
function buildFrame() {
if ($('#mid').length > 0) {} else {
$('body').append("<div id='mid'></div>");
$('#mid').css({
height: "100%",
width: "100%",
position: "absolute",
top: "0",
"backgroundColor": "rgba(51, 51, 51, .5)"
});
}
if ($('#info').length > 0) {} else {
$('#mid').append("<div id='info'></div>");
$('#info').css({
position: "absolute",
top: "35%",
left: "35%",
fontSize: "6em",
color: "#fff"
});
}
}
buildFrame();
$('#info').empty().append("YOUR CONTENT");
});
This effect has been achieved with CSS3 animations. You must declare the transition property in your CSS, here you have an example code:
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
And here you have an example in jsfiddle:
http://jsfiddle.net/elchininet/Zm9uc/
I may be slow to make a fiddle but... her ya go. You have to use css transitions like so
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
. I made a fiddle.
http://jsfiddle.net/Davidicus/BpAL5/
I wish to create an animation where upon every click of a button, an object moves a certain amount to its right.
e.g If the initial position of the object was say "left:10px" and every 1 loop of animation moves it by say 10px, then after first click it should be at 20px, after second click it should be at 30px and so on.
Here's my code right now:
JavaScript
document.getElementById( 'move-me' ).addEventListener( 'click', function () {
var move = document.getElementById( 'move' );
move.style.left = ( move.offsetLeft + 10 ) + 'px';
}, false );
HTML
<button id="move-me">Move</button>
<div id="move"></div>
CSS
#move {
background: green;
height: 50px;
left: 0px;
position: absolute;
top: 100px;
transition: left 250ms ease-in-out;
-moz-transition: left 250ms ease-in-out;
-ms-transition: left 250ms ease-in-out;
-o-transition: left 250ms ease-in-out;
-webkit-transition: left 250ms ease-in-out;
width: 50px;
}
This code uses CSS3 transitions but it doesn't make use of the -webkit-transform hardware acceleration on my android device. How do I fix that?
The choice is not between -webkit-transform and -webkit-transition, it's between left and -webkit-transform.
Here is how to make use of 3d acceleration:
#move {
background: green;
height: 50px;
left: 0px;
position: absolute;
top: 100px;
-moz-transition: -moz-transform 250ms ease-in-out;
-ms-transition: -ms-transform 250ms ease-in-out;
-o-transition: -o-transform 250ms ease-in-out;
-webkit-transition: -webkit-transform 250ms ease-in-out;
transition: transform 250ms ease-in-out;
width: 50px;
}
Javascript:
document.getElementById( 'move' ).addEventListener( 'click', function() {
var move = document.getElementById( 'move' );
var transform = "translate3d("+ (move.offsetLeft+200) + "px, 0, 0)";
move.style.webkitTransform = transform;
move.style.mozTransform = transform;
move.style.msTransform = transform;
move.style.oTransform = transform;
move.style.transform = transform;
}, false );
http://jsfiddle.net/CjQ8H/
You can also use translateX. This defintely hardware accelerates.
targetDiv.style.webkitTransition = "0ms"
targetDiv.style.webkitTransform = "translateX(100%)
This would move a div to the right by 100% but nice and smooth only in hardware accelerated devices.