logo
down
shadow

JQuery hover function opacity animation


JQuery hover function opacity animation

By : user2950598
Date : November 17 2020, 11:55 AM
help you fix your problem trying to animate a divs opacity when hovering some other element. First I tried it with display none/block, but it read somewhere it's impossible to make a transition for that. , you can do it just using css if you need only on hover
code :
.post-content--padded{
    opacity: 0;
    -webkit-transition: all 2s;
    -moz-transition: all 2s;
    transition: all 2s;
}
.post-content:hover .post-content--padded{
    opacity: 1;
    -webkit-transition: all 2s;
    -moz-transition: all 2s;
    transition: all 2s;
}
$('.post-content--padded').hide();
$('.post-content').hover(function(){
    $(this).find('.post-content--padded').fadeToggle(2000);
});


Share : facebook icon twitter icon
Using Jquery to keep opacity of one div, reduce opacity of rest on hover

Using Jquery to keep opacity of one div, reduce opacity of rest on hover


By : Thomas Kittoe
Date : March 29 2020, 07:55 AM
I wish did fix the issue. While this question already has an answer, an additional answer was provided that I tweaked and has since been deleted. Here it is using jQuery and loses the hover state when nothing is hovered. Easy.
http://jsfiddle.net/kKHt4/3/
code :
$(".subelement").hover( function() {
    $(this).siblings().stop().fadeTo("fast", 0.5);
}, function() {
    $(this).siblings().stop().fadeTo("fast", 1.0);
});​​​​​
Creating jquery function for image opacity animation doesn`t work

Creating jquery function for image opacity animation doesn`t work


By : M.K
Date : March 29 2020, 07:55 AM
it fixes the issue You need to create a wrapper function : and pass this : ( also I would use find and not children so it seeks deeper)
code :
function op_fadein(t,element,val1){

    $(t).find(element).stop().animate({
    opacity: val1,
    }, 200);
}

function op_fadeout(t,element,val2){

    $(t).find(element).stop().animate({
    opacity: val2,
    }, 200);
}

$('.post').hover(function (){op_fadein(this,'img','0.5')},function (){op_fadeout(this,'img', '1')});
jQuery hover Opacity and Click Stay on Opacity

jQuery hover Opacity and Click Stay on Opacity


By : Gaurav
Date : March 29 2020, 07:55 AM
help you fix your problem This will add a class to the clicked element named "clicked". On the hover out function, it checks if the element has til class assigned or not. If class is not present, it will animate back out to 70% opacity.
code :
$(".opacity-change img").css('opacity','0.7');
$(document).ready(function(){
    $(".opacity-change img").hover(
    function() {
        $(this).animate({ opacity: 1 }, 500);
    },
    function() {
        if ( !$(this).hasClass( 'clicked' ) ){
            $(this).animate({ opacity: 0.7 }, 500); 
        }
    });
});

$(document).ready(function(){
    $('.profiles a').bind('click',function(){
        $('.checked').hide();
        $('.clicked').css("opacity", 0.7).removeClass('clicked');
        $(this).find('.checked').show();
        $(this).addClass( 'clicked' );
    });
});
CSS 3 Animation with Keyframes on hover change of opacity and z-index don't work

CSS 3 Animation with Keyframes on hover change of opacity and z-index don't work


By : user5718568
Date : March 29 2020, 07:55 AM
wish of those help This happend cause you gave to parent div less opacity with "color" keyframes and then apply that animation to parent of a hovered div. You should make color changes on "bubble" div.
codepen: http://codepen.io/bra1N/pen/dXKLbp
code :
.solSystem {
  postion: absolute;
  height: 25vw;
}
.orbitLink,
.orbitLink:active,
.orbitLink:visited {
  color: #FFF;
}
.mars:hover,
.earth:hover {
  animation-play-state: paused;
}/*
.bubble:hover {
  background: #DE383B !Important;
  padding: 1vw;
  border: 0.1vw solid #000;
  color: #FFF !Important;
  transform: scale(1.2);
  opacity: 1 !important;
  z-index: 100 !important;
}*/
.mars {
  float: left;
  margin: 4vw auto;
  border-radius: 50%;
  position: absolute;
  animation-name: moveRigthToLeft, scale;
  animation-iteration-count: infinite, infinite;
  animation-timing-function: ease-in-out, linear;
}
.earth {
  float: left;
  margin: 4vw auto;
  border-radius: 50%;
  position: absolute;
  animation-name: moveLeftToRigth, scale;
  animation-iteration-count: infinite, infinite;
  animation-timing-function: ease-in-out, linear;
}
.bubble {
  padding: 1vw;
  color: #FFF;
  border-color: #000;
  border-width: 0.1vw;
  background-color: #004A99;
  font-weight: bold;
  font-size: 1.1vw;
  font-family: Arial, FreeSans, sans-serif;
  position: absolute;
  border-style: solid;
  border-radius: 100%;
  animation-name: color;
  animation-iteration-count: infinite;
  animation-duration: 30s;
}
@keyframes moveLeftToRigth {
  0% {
    left: 15vw;
  }
  50% {
    left: 40vw;
  }
  100% {
    left: 15vw;
  }
}
@keyframes scale {
  0% {
    transform: scale(1);
  }
  32% {
    transform: scale(0.7);
    animation-timing-function: ease-in;
  }
  70% {
    transform: scale(0.8);
    animation-timing-function: ease-in;
  }
  75% {
    transform: scale(0.9);
    animation-timing-function: ease-in-out;
  }
  86% {
    transform: scale(1.2);
  }
  98% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes color {
  0% {
    opacity: 0.4;
    z-index: 1;
  }
  20% {
    opacity: 0.6;
    z-index: 2;
  }
  40% {
    opacity: 0.7;
    z-index: 3;
  }
  60% {
    opacity: 0.8;
    z-index: 4;
  }
  80% {
    opacity: 0.9;
    z-index: 5;
  }
  90% {
    opacity: 1;
    z-index: 6;
  }
  95% {
    opacity: 0.8;
    z-index: 4;
  }
  100% {
    opacity: 0.6;
    z-index: 2;
  }
}
<div class="solSystem">
  <a href="Test1.html">
    <div class="earth" style="animation-duration: 20s,20s,20s;">
      <div class="bubble" style="left:12vw;">
        <a href="Test1.html" title="Test1" class="orbitLink"> Test1</a>
      </div>
    </div>
  </a>
  <a href="Test2.html">
    <div class="mars" style="animation-duration: 30s,30s,30s;">
      <div class="bubble" style="left:30vw;">
        <a href="Test2.html" title="Test2" class="orbitLink">Test2</a> 
      </div>
    </div>
  </a>
</div>
SVG opacity animation on hover with CSS

SVG opacity animation on hover with CSS


By : mario
Date : March 29 2020, 07:55 AM
To fix the issue you can do The problem was that you were triggering the keyframe animation on the element itself, then telling one of the elements inside it to have a delayed animation.
You can only add properties like animation-delay on the elements being animated, so I moved the animation to the elements. Here you go:
code :
svg {
  width: 202px;
  height: 202px;
}

svg:hover circle {
  animation: show-inner 1s;
}

svg circle.ring-outer {
  animation-delay: 300ms;
}

@keyframes show-inner {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
<svg viewbox="0 0 202 202" preserveAspectRatio="xMidYMid meet" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <circle cx="101" cy="101" r="100" stroke="#7b82c7" stroke-width="1" fill="none" class="ring-outer"/>  
  <circle cx="101" cy="101" r="76" stroke="#7b82c7" stroke-width="1" fill="none" class="ring-inner"/>  
</svg>
Related Posts Related Posts :
  • How to change add and remove active class in JavaScript
  • how to toggle a specific div in javascript
  • How to get all the values from multiple keys of an array of object?
  • jQuery bind() unbind() and on() and off()
  • regular expression to find DD Month YYYY from a string
  • How to upload files from web client (HTML/jQuery form) to your Dropbox folder
  • Backbone history and require.js issue
  • Confusion over Classical and Prototypal Inheritance Javascript
  • How to take screen shot of current webpage using Javascript/JQuery?
  • Store meridiem in a variable
  • class declared inside closure vs standard class without closure
  • javascript confirm box always return true
  • dynamically changing the size of font size based on text length using css and html
  • Node.js - Getting the host IP address while on Amazon EC2
  • Confusing CSS, can anyone explain please
  • How to install v8-profiler on Windows 8 (64 bit) using npm?
  • Resolve promise based on another promise
  • google maps adding overlay layer above UI and markers
  • Style specific letter?
  • RangeError: Maximum call stack size exceeded with array.slice
  • node rest client get with local variable
  • If condition not executes while mouse move fastly
  • Count the number of displayed elements in a HTML list
  • Locate JavaScript source code in Emacs
  • Clean, Modular Code vs MV* Frameworks
  • infinite scroll without loading image
  • Backbone: reverse collection order with comparator
  • What do printers ignore?
  • jQuery UI .tabs() Contentless tab?
  • Execute Javascript alert() after page (visually) loaded
  • JavaScript - duplicating array doesn't work
  • Excessive clickable area below image
  • JavaScript Regex: Replace |b| with <b>
  • Unexpected value change in 2D array in JavaScript
  • Function doesnt see parameter as a array of objects
  • jQuery fetch keypress event on chrome and IE
  • How to enable jquery validate localization?
  • Cassandra map collection returned by node.js Helenus looks odd
  • angular ng-repeat with multiple filter options
  • Selecting Children without ID or Class names
  • How to uncheck a group of checkboxes when another checkbox is checked
  • Is hiding content by Javascript or jQuery Worth trying
  • Load XUL resource using javascript
  • XML to HTML text area from server file system
  • set focus() on textbox on form onload
  • es lint '' is assigned a value but never used' eventhough i have used it
  • Can "name" attribute be used for custom VueJS components
  • Get innerHTML of content when it is clicked
  • HTTPS causes CSS animations to not load? Very confused
  • How to hide other div apart from touched div to the band
  • Is global variable assignment atomic on NodeJS?
  • Datepicker onchangemonthyear beforeshowday
  • trying to render html files using jade but it still adresses it as a jade
  • Google Analytics - Understanding and Dissecting the Snippet: What is | | [ ];
  • Replacing "[aA09.b]." to "[aA09.b]\n" in in JavaScript
  • Why wrap a function definition in an immediate function?
  • Enable / disable jQuery script on switching to different tab in a HTML page
  • how can find return variable value outside anonymous function in node js mysql query function
  • Converting 1 to 0001 in javascript array
  • svg viewbox should not resize the text fontSize?
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org