Can anybody make a copy of this jquery effect? [closed]

It's difficult to tell what is being asked here. This开发者_Go百科 question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center. Closed 11 years ago.

I am trying for hours to copycat this http://buildinternet.com/project/supersized/ expanding ball demo and I am failing every time. Can anybody help and make a copy on jsfiddle?

---

You can find the relevant code in the html (it's a referenced js):

    $('.circle-wrap').hover(
        function(){
            $('.circle',this)
                .stop()
                .animate({width : '150px', height : '150px', 'margin-top' : '-75px', 'margin-left' : '-75px'  }, 200);
        },
        function(){
            $('.circle',this)
                .stop()
                .animate({width : '100px', height : '100px', 'margin-top' : '-50px', 'margin-left' : '-50px'  }, 100);
        }
    );

Just use a browser with an "inspect element" feature (firefox has firebird, opera has dragonfly, safari and chrome have similar features) and follow the trail to the function.

---

This is how I would do it, note in IE you will have boxes rather than circles.

Live Demo

JS

 $('.ball').hover(function(){
     $(this).animate({width : '250px', height : '250px', lineHeight : '250px'}, 500);
        }, 
 function(){
     $(this).stop().animate({width : '200px', height : '200px', lineHeight : '200px'}, 500)
         });

CSS

.ball{
    -webkit-border-radius:250px;
    -moz-border-radius: 250px;
    border-radius: 250px;
    background: green;
    width : 200px;
    height : 200px;
    text-align: center;
    line-height: 200px;
}

Markup

<div class="ball">Demo</div>

CSS3 option

CSS3 animation demo

.ball{
    -webkit-border-radius:250px;
    -moz-border-radius: 250px;
    border-radius: 250px;
    background: green;
    width : 200px;
    height : 200px;
    text-align: center;
    line-height: 200px;
    transition:all .5s ease-in-out;
    transform:scale(1,1);
    -webkit-transition:all .5s ease-in-out;    
    -webkit-transform:scale(1,1);
    -moz-transition:all .5s ease-in-out;    
    -moz-transform:scale(1,1);        
}

.ball:hover{
 transition:all .5s ease-in-out;
 transform:scale(1.5,1.5);   
 -webkit-transition:all .5s ease-in-out;    
 -webkit-transform:scale(1.5,1.5);    
 -moz-transition:all .5s ease-in-out;    
 -moz-transform:scale(1.5,1.5);    
}

---

Checkout the demo

---

CSS (to make it round):

-moz-border-radius:360px;
 -webkit-border-radius:360px;
 border-radius:360px;

jQuery:

var origWidth, origHeight, inrease = 50;

$('#hello').hover(function(){
  origWidth = $(this).width();
  origHeight = $(this).height();  
  
  // expand it
  $(this).animate({width:origWidth + inrease, height:origHeight + inrease});
  
}, function(){
  $(this).animate({width:origWidth, height:origHeight});
});

---

• View source -> those two elements are with a circle class, wrapped in circle-wrap.
• Open supersized-project.js. There's the source you're looking for.

---

A small observation of the code and you find these... JS

/* Circle Expansion
-----------------------*/       
$('.circle-wrap').hover(
    function(){
        $('.circle',this)
            .stop()
            .animate({width : '150px', height : '150px', 'margin-top' : '-75px', 'margin-left' : '-75px'  }, 200);
    },
    function(){
        $('.circle',this)
            .stop()
            .animate({width : '100px', height : '100px', 'margin-top' : '-50px', 'margin-left' : '-50px'  }, 100);
    }
);

CSS

.circle-wrap{ width:150px; height:150px; text-align:center; position:absolute; float:left; text-decoration:none; }  
    .circle-wrap .circle{ position:absolute; top:50%; left:50%;  height:100px; width:100px; display:block; overflow:hidden; margin:-50px 0 0 -50px; background:#7bbe31; -moz-border-radius:75px; -webkit-border-radius:75px; border-radius:75px; }
    .circle-wrap .label{ z-index:5; position:relative; top:50%; width:100%; display:block; margin-top:-7px; color:#fff; text-align:center; text-shadow:1px 1px 1px #6caf1f; font:bold 16px "Helvetica Neue", Helvetica,Arial,sans-serif; line-height:14px; -webkit-font-smoothing: antialiased; }
    .demo-circle{ top:100px; left:200px; }
    .download-circle{ top:100px; left:350px; }
        .download-circle .label{ text-shadow:1px 1px 1px #000; }
        .download-circle .circle{ background:#0a0a0a; }

On a side note, this website has some awesomely commented/written code o: