Image Opacity

off.the.walls

Using css I have the image opacity at 50%
when hovered over I up them to 100%

What i need to know is what javascript could i use to keep them at 100% until another image is clicked?

thanks
ev

GreeBo

So you want the opacity to hit 100% on hover, and stay at 100% until another images is clicked?
Thats going to cause images to change as the user moves their mouse around, whether they want to select those images or not.
From a UX perspective you probably want to have something like:
3 css styles, one with 50% and the other two with 100%

Set all images to 50% and then on mouseover toggle the styles, removing the 50% style and adding the 100% style.
For mouseout you want the same code (toggle will add the style if its not there and remove it if it is there already)

then if the user clicks you toggle the other 100% style on and off.

That should mean that hovering shows the image but when you move the mouse it goes opaque aging.
However if the user actually clicks on an image it stays at 100% until the users clicks on it...

make sense?

You can do the above easily with jQuery + Google.

red_ice

This is very simple with jQuery, even easier than doing it with CSS.

Get rid of the CSS you have used to make it change opacity etc. Read this, and ignore the 'mouseleave' part. Or append something that will turn opacity up on all divs once its clicked, the code for that is here.

There are a number of really easy ways to do this with very basic jQuery.

Cheers

red_ice

I just remember that you don't actually have to animate the CSS to make this work. You can just use the fadeTo() command which will animate and change opacity for you.

heres the command

It should look something like..

div.mouseenter(function(){
div.fadeTo('slow', 0.5);
});

The syntax is wrong on this, but clean it up and that should do the job. replace div with $this or whatever it is you want to target.

That will do a slow fade to 50% opacity. replace 'slow' with a 0-1000 and that will do the fade instantly-1 second.

So div.fadeTo(5000, 0.5); would fade it over 5 seconds to 50% opacity.

GreeBo

The reason I would do it using styles + jQuery is so that its trivial to keep the same behaviour but change the look of it
e.g. I want it to have a red border instead of fade

red_ice

GreeBo wrote: »

The reason I would do it using styles + jQuery is so that its trivial to keep the same behaviour but change the look of it
e.g. I want it to have a red border instead of fade

I get your point, but you need to think outside the proverbial box.

//

---

CSS
.outside { width:100px; height: 50px; border: 1px red; margin:0px; padding: 0px; }
.inside {width:100%; height: 100%; border:0px; background:#eee; }


//

---

jQuery
inside.mouseenter(function(){
inside.fadeTo('slow', 0.5);
});


//

---

HTML
<div class="outside">
<div class="inside">
what you want to animate
</div>
</div>

GreeBo

red_ice wrote: »

I get your point, but you need to think outside the proverbial box.

//

---

CSS
.outside { width:100px; height: 50px; border: 1px red; margin:0px; padding: 0px; }
.inside {width:100%; height: 100%; border:0px; background:#eee; }


//

---

jQuery
inside.mouseenter(function(){
inside.fadeTo('slow', 0.5);
});


//

---

HTML
<div class="outside">
<div class="inside">
what you want to animate
</div>
</div>

Im not sure what box you believe me to be thinking inside.

// jQuery
adding/removing styles per required event(s)

//css
defining the styles
for example
.fade {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}

With the above you can pretty much change the css to make whatever you want to happen, without having to change the logic behind it, thats what css is for, presentation.

Using jquery to change presentation is bad imo, just because it can do it, doesnt mean you should.

red_ice

GreeBo wrote: »

Using jquery to change presentation is bad imo, just because it can do it, doesnt mean you should.

I just wrote out a lengthy response to your last post with the assumption that you were the OP. Don't know why..

In a nutshell, it was saying if you're struggling with basic css(let alone a css animation), jQuery is what you need to look at. I then went on to give out to you for actually knowing what you're talking about and wasting my time with a reply.

So, yes, use CSS where you can, but in fairness, dont knock jQuery for that stuff, it's gotten me out of many a bind. I've also won awards based purely on jQuery interactivity where more complex css animations wouldn't cut it.

GreeBo

I just find that some people use jquery because they can, when they should use css because they can.
Then some nice business person comes over and says "hey, we are rebranding, make everything thats white and blue now be green and grey"
so you go, recompile your SASS changes and it nearly all works....argh!

I dont knock it, I use it a lot, just dont think it should be your first port of call for presentation issues.

red_ice

GreeBo wrote: »

just dont think it should be your first port of call for presentation issues.

I agree 100%.