-1

So, I see a few things that seem like they might be relevant to this question, but they aren't similar enough for me to be able to use their answer.

Anyway, basically, I want to have a button with a dollar sign in my sidebar. When the mouse is hovered over it, I want it to smoothly slide out and have the word "Donate" on it, keeping the $ on the right side of the button. Then, when the mouse is no longer hovering over it, I want it to slide back in.

Example:

Mouse not over:

$

Mouse over:

e $

te $

(slides all the way out)

Donate $

Except with real buttons. Note: If it can't use an image as the button, that's fine. It'd be nice if I could, but honestly it doesn't matter in the long run, as I can probably make the HTML button look just as nice.

This seems like a really simple question, so I really hate to ask about it, but I simply can't figure it out.

Edit:

Well, here's one thing I tried.

In head tag:

<script type="text/javascript">
$(document).ready(function()
    {
    $("#imgAnimate1").hover(
        function()
        {
            $(this).attr("src", "donateB.gif");
        },
        function()
        {
            $(this).attr("src", "donateA.png");
        });
</script>

Where the image is:

<div id="sidebar">
<img id="imgAnimate1" src="Images/donateA.png" alt="" >
</div>

Result (WHILE hovering mouse over it): http://prntscr.com/45js7q

Community
  • 1
  • 1
user143134
  • 23
  • 2
  • 5
  • 2
    What have you tried so far? Show research effort and previous attempts at solving the problem. – esqew Jul 23 '14 at 15:11
  • @esqew and preferably a fiddle =) – Johan Hjalmarsson Jul 23 '14 at 15:11
  • You seem to be rather new to web design. I would highly recommend you start learning CSS if you haven't already. It can solve all your problems. Stack Overflow is not a site where people will provide solutions without some demonstrated effort by the person asking for help. – Jason Jul 23 '14 at 15:18
  • CSS3 animations might be what you are looking for I presume? You might want to look into that – IndieRok Jul 23 '14 at 15:19
  • esqew: Alright edited with an example of something I tried. @Jason I'm not new, I've been messing with HTML for well over a year now, and was in my high school web design class. I just haven't ever looked into more advanced things, I've only gotten really good at the more basic things. IndieRok: Alright, I'll look into it. :) – user143134 Jul 23 '14 at 15:23
  • You have syntax errors in your example (unclosed `$(document).ready()` block, unclosed `$.hover()` block). Are you sure that's the code you were using? – esqew Jul 23 '14 at 15:25

1 Answers1

0

These resources will get you started in the right direction.

CSS3 transition 1

CSS3 transition 2

Stack Overflow post about same kind of question + Answer

You can achieve this without even using jquery. Only CSS and CSS3 markup

Example:

.myImage{
    width:200px;
    height:25px;
    background:#C96666;
    position:relative;
    display:inline-block;
    left:-180px;
    transition: 1s;
}

.myImage:hover{
    transition: 1s;
    left: 0;
}
Community
  • 1
  • 1
IndieRok
  • 1,778
  • 1
  • 14
  • 21