Transition on image width does not work with window scroll

Transition on image width does not work with window scroll - javascript

i have a logo image in sticky topbar menu so when scrolling down i'm trying to change the image width using css transition but it is not working with jquery window scroll when i add the css class to logo image but when i hover on the logo image it work
my code css
.logo img
{
width: 100%;
transition:width 1s ease;
-moz-transition: width 1s ease;
-ms-transition: width 1s ease;
-webkit-transition: width 1s ease;
-o-transition: width 1s ease;
}
.transition , .logo img:hover{
width: 50%;
transition:width 1s ease;
-moz-transition: width 1s ease;
-ms-transition: width 1s ease;
-webkit-transition: width 1s ease;
-o-transition: width 1s ease;
}
js code
$j = jQuery.noConflict();
$j(function(){
$j(window).on("scroll", function () {
if ($j(this).scrollTop() > 100) {
$j('.logo img').addClass('transition');
console.log($j(this).scrollTop());
} else {
$j('.logo img').removeClass('transition');
console.log('cvc');
}
});
});
please any help and many thanks in advance.

You wants something like this ?
Just changed your selectors a bit. Because of the inheritance of .logo img, .transition wasn't suffisant to erase .logo img properties.
.logo img
{
width: 100%;
transition:width 1s ease;
-moz-transition: width 1s ease;
-ms-transition: width 1s ease;
-webkit-transition: width 1s ease;
-o-transition: width 1s ease;
}
.logo .transition{
width: 50%;
transition:width 1s ease;
-moz-transition: width 1s ease;
-ms-transition: width 1s ease;
-webkit-transition: width 1s ease;
-o-transition: width 1s ease;
}

Related

CSS transition not working when changing css from javascript

I'm basically trying to make popups appear from the element they were clicked, similar to Angular Material Dialogs here. I know how to do transitions by adding and removing classes but what about when you want to work with styles that are calculated dynamically and need to be set through javascript. This doesn't seem to work.
See plunkr
$(document).ready(function(){
$(document).on("click", ".heading" , function(ev){
var el = $(this);
var offset = el.offset();
$(".popup").css("top", offset.top);
$(".popup").css("left", offset.left);
$(".popup").addClass("visible");
});
$(".close").on("click", function(ev){
$(".popup").removeClass("visible");
});
});
.heading{ width:100px; height:40px; background-color:grey; margin:50px 0 150px 0; padding:10px; }
.popup{
background-color:grey;
position:absolute;
height:0
width:0; opacity:0;
-webkit-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s
ease-out, top 0.3s ease-out, left 0.3s ease-out;
-moz-transition:
opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top
0.3s ease-out, left 0.3s ease-out; -ms-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s
ease-out, left 0.3s ease-out;
-o-transition: opacity 0.5s ease-out,
width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left
0.3s ease-out; }
.popup.visible{ opacity:1; height:250px; width:400px;
top:400px !important; left:200px !important; }
.close:hover{cursor:pointer;}
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="heading">click me 1st </div>
<div class="heading">click me 2nd</div>
<div class="heading">click me 3rd</div>
<div class="popup">
ttttttttttttttttttttttttttttttttttttttttttttttttttttttt
<div style="margin:40px" class="close">close</div>
</div>
</body>
</html>
The way it should be is it transitions from the div you clicked on, ends on the center and when you close it transitions back the div you clicked on.
The way it actually is is: clicking the first div makes the popup appear where it's supposed to end. After this point the transition (top and bottom ones) always seem to be one step behind. If you click the 2nd div the transition starts from where it ended before i.e the previous div(which is wrong, it should start from the div you clicked) and ends in the middle, which is also correct. When you hit close it goes back to the correct div.
Is there some way around this? Tell the engine to update values manually or may be edit classes through javascritp? Any help would be appreciated.
Thanks

Transition according to google is:
the process or a period of changing from one state or condition to
another.
To have a transition you have to start with one state, and change it to another state. However, the state needs to be gradual, which means that you've got to wait a bit after setting the 1st state.
When you do this, you set the start top and left and then override them immediately using the visible class.
Note - I've changed the dimensions a bit, to fit the SO examples area. You can find the example with original dimensions here.
$(".popup").css("left", offset.left);
$(".popup").addClass("visible");
To prevent that, use a delay. I've used requestAnimationFrame.
I've also added cleanup for the top and left settings, after the popup closes.
$(document).on("click", ".heading", function(ev) {
var offset = $(this).offset();
var $popup = $(".popup");
//set the starting point
$popup.css({
top: offset.top,
left: offset.left,
visibility: 'visible'
});
//wait and start the show animation
requestAnimationFrame(function() {
$popup.addClass("visible");
});
});
$(".close").on("click", function(ev) {
var $popup = $(".popup");
$popup
//only when the hide animation ends we reset the popup
.one('transitionend', function() {
$popup.css({
top: '',
left: '',
visibility: 'hidden'
});
})
//start the hide animation
.removeClass("visible");
});
h1 {
color: red;
}
.heading {
width: 100px;
height: 40px;
background-color: grey;
margin: 50px 0;
padding: 10px;
}
.popup {
background-color: grey;
position: absolute;
height: 0;
width: 0;
opacity: 0;
overflow: hidden;
-webkit-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
-moz-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
-ms-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
-o-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
}
.popup.visible {
opacity: 1;
height: 150px;
width: 200px;
top: calc(50% - 75px) !important;
left: calc(50% - 100px) !important;
}
.close:hover {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="heading">heading 1</div>
<div class="heading">heading 2</div>
<div class="heading">heading 3</div>
<div class="popup">
rghe;roigegrh'ragjh oewighe ergj ergj rrgj ger[
<div style="margin:40px" class="close">close</div>
</div>

use below mentioned CSS code
.heading {
width: 100px;
height: 40px;
background-color: grey;
margin: 50px 0 150px 0;
padding: 10px;
}
.popup {
background-color: grey;
position: absolute;
height: 0;
width: 0;
opacity: 0;
-webkit-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
-moz-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
-ms-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
-o-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
}
.popup.visible {
opacity: 1;
height: 250px;
width: 400px;
top: 400px !important;
left: 200px !important;
}
.close:hover {
cursor: pointer;
}

My hover transition isn't smooth on first try

I have a call to action button made of text that has an arrow > in it. I wanted the arrow to transition smoothly to the right on hover and then go back in place on hover out. Here's the HTML, CSS, and jQuery for the CTA button:
$("#lnkTech").hover(function(){
$("#lnkTech > .spnCTATxtArrow").removeClass("arrowAnimateOut");
$("#lnkTech > .spnCTATxtArrow").addClass("arrowAnimateIn");
},function(){
$("#lnkTech > .spnCTATxtArrow").removeClass("arrowAnimateIn");
$("#lnkTech > .spnCTATxtArrow").addClass("arrowAnimateOut");
});
/* CTA Styles */
.divCTA {
background-color: #00AA7E;
padding: 20px 0px;
text-align: center;
width: 12em;
font-weight: bold;
text-transform: uppercase;
font-size: 0.8em;
margin-left: auto;
margin-right: auto;
}
.divCTA:hover {
background-color: #009E75;
}
.divCTA a {
color: #fff;
text-decoration: none;
}
.divCTA a:hover {
color: #fff;
text-decoration: none;
}
.spnCTATxt {
position: relative;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.spnCTATxtArrow {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.arrowAnimateIn {
position: relative;
left: 15px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.arrowAnimateOut {
position: relative;
left: 0px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.arrowAnimate {
position: relative;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
<div class="divCTA">
<span class="spnCTATxt">Learn More <span class="spnCTATxtArrow" id="lnkTechArrow">></span></span>
</div>
What happens is upon load or refresh, the arrow quickly jumps top the right on first hover, then the transition kicks in on hover out, and on subsequent hovers, the transition works. I would like the transition to work every time, even on the first hover. I've even added the transition CSS to all the containers but I still get the same result.
Please help me fix this :(

the solutions is quite simple , you need to set an initial value to the element to the hover effect would start from this value to the transform value
so add to your css
#lnkTech > .spnCTATxtArrow{
left:0px;
}

Carousel loose responsive behaviour with "image in div" zooming on hoover effect

Using flickity carousel I've created the following example here in codepen.io link. Here is CSS code I've implemented:
CSS
.image-hoover {
overflow: hidden;
}
.image-hoover img {
-moz-transform: scale(1.02);
-webkit-transform: scale(1.02);
transform: scale(1.02);
-webkit-transition: all 10s ease;
-moz-transition: all 10s ease;
-o-transition: all 10s ease;
-ms-transition: all 10s ease;
transition: all 10s ease;
}
.image-hoover:hover img {
-moz-transform: scale(1.06);
-webkit-transform: scale(1.06);
transform: scale(1.06);
-webkit-transition: all 10s linear;
-moz-transition: all 10s linear;
-o-transition: all 10s linear;
-ms-transition: all 10s linear;
transition: all 10s linear;
}
The issue I can't figure out is that images loose responsive behavior only until I turn off this part:
.image-hoover img {
-moz-transform: scale(1.02);
-webkit-transform: scale(1.02);
transform: scale(1.02);
-webkit-transition: all 10s ease;
-moz-transition: all 10s ease;
-o-transition: all 10s ease;
-ms-transition: all 10s ease;
transition: all 10s ease;
}
But in this case when you unhover the image returns back to it size very fast loosing the transition effect, can you please suggest how to figure out this issue?
1. Here the responsive behavior of image is present, but zoom effect on hoover loose transition.
2. In this example you can notice that transition works great, but if you resize the window images loose their responsive behaviour.

It happens because you said for the transition to apply on all actions, so the 10s transition happens also when the images change thier when the screen changes width.
You will need to change
-webkit-transition: all 10s ease;
-moz-transition: all 10s ease;
-o-transition: all 10s ease;
-ms-transition: all 10s ease;
transition: all 10s ease;
to
-webkit-transition: -webkit-transform: 10s ease;
-moz-transition: -moz-transform 10s ease;
-o-transition: transform 10s ease;
-ms-transition: transform 10s ease;
transition: transform 10s ease;
And remove the transition from the :hover.
This will now work.
Fiddle-http://codepen.io/anon/pen/eJWQRq?editors=110

Menu scrambling in CSS

HTML:
<div id="menu" class="menu">
<ul class="headlines">
<li id="item1"onclick="checklist(this)"><button onclick="myFunction()">AA</button></li>
<li id="item2"><button onclick="myFunction2()">A </button></li>
<li id="item3">B </li>
<li id="item4">C </li>
<li id="item5">D </li>
<li id="item6">E </li>
<li id="item7">F </li>
</ul>
</div>
CSS:
lu, li{
list-style-type: none;
font-size: 1.5em;
height: 40px;
width: 150px;
text-align: right;
border-style: none;
}
.menu{
width:150px;
height: 350px;
margin:0 auto;
}
.menu li{
position: relative;
top:150px;
bottom: 0;
right: 0;
margin: auto;
border-style:none;
}
//animation
#item7{
transition: opacity .8s, left .8s ease-out;
-moz-transition: opacity .8s, left .8s ease-out;
-webkit-transition: opacity .8s, left .8s ease-out;
-o-transition: opacity .8s, left .8s ease-out;
}
#item6{
transition: opacity 1s, left 1s ease-out;
-moz-transition: opacity 1s, left 1s ease-out;
-webkit-transition: opacity 1s, left 1s ease-out;
-o-transition: opacity 1s, left 1s ease-out;
}
#item5{
transition: opacity 1.2s, left 1.2s ease-out;
-moz-transition: opacity 1.2s, left 1.2s ease-out;
-webkit-transition: opacity 1.2s, left 1.2s ease-out;
-o-transition: opacity 1.2s, left 1.2s ease-out;
}
#item4{
transition: opacity 1.4s, left 1.4s ease-out;
-moz-transition: opacity 1.4s, left 1.4s ease-out;
-webkit-transition: opacity 1.4s, left 1.4s ease-out;
-o-transition: opacity 1.4s, left 1.4s ease-out;
}
#item3{
transition: opacity 1.6s, left 1.6s ease-out;
-moz-transition: opacity 1.6s, left 1.6s ease-out;
-webkit-transition: opacity 1.6s, left 1.6s ease-out;
-o-transition: opacity 1.6s, left 1.6s ease-out;
}
#item2{
transition: opacity 1.8s, left 1.8s ease-out;
-moz-transition: opacity 1.8s, left 1.8s ease-out;
-webkit-transition: opacity 1.8s, left 1.8s ease-out;
-o-transition: opacity 1.8s, left 1.8s ease-out;
}
#item1{
transition: opacity 2s, left 2s ease-out;
-moz-transition: opacity 2s, left 2s ease-out;
-webkit-transition: opacity 2s, left 2s ease-out;
-o-transition: opacity 2s, left 2s ease-out;
}
I want to animate this menu which is centered in the middle of my website, to go to the ultimate left in this form / ,it works however when i resize the window the menu isn't responsive, it doesn't remain in the middle of the screen. Any help?

I don't know whether I understood your question correctly,
Please checkout this style and let me know this satisfy your needs.
lu, li{
list-style-type: none;
font-size: 1.5em;
text-align: center;
border-style: none;
}
.menu{
width:150px;
height: 350px;
margin:0 auto;
}
.menu li{
position: relative;
top:150px;
margin: 0 auto;
border-style:none;
}

Animate addition of a class through jquery/javascript

I have:
<div class="button" id="button1">Click</div>
<div class="button" id="button2">Click</div>
and the JS
$('.button').click(function(){
$('.button').removeClass('selected');
$(this).addClass('selected');
});
CSS
.selected {
background-color: green;
}
Can I 'animate' the applying of the class 'selected'? I.e on a click of the div, the background slides in from the right or fades in for example? Is there a decent plugin available that could achieve this? Is there are a CSS workaround/method?

Simply use CSS3
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
Example
http://jsfiddle.net/tw16/JfK6N/
if you don't want to use CSS3 to support older Browsers use the done() callback of animate
$('.button').click(function() {
$('.button').removeClass('selected');
$(this).animate({
backgroundColor: green
}, 1000, "linear", function() {
$(this).addClass('selected');
});
});

You can use css3 for that. Use transition to background color change.
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
Here is the example with your code:
http://jsfiddle.net/mm9mV/

We Keep Coding

JavaScript is the programming language of the Web.

Transition on image width does not work with window scroll - javascript

Related

CSS transition not working when changing css from javascript

My hover transition isn't smooth on first try

Carousel loose responsive behaviour with "image in div" zooming on hoover effect

Menu scrambling in CSS

Animate addition of a class through jquery/javascript

Categories

Resources