Border-radius + animate

Version imprimable

14/09/2010, 18h51
nims

Border-radius + animate

Bonsoir à tous !

Je viens de tester l'animate de jquery pour modifier le border-radius d'une div.

Cela fonctionne presque parfaitement: si mon div à un BR de 3px et que l'animate le passe à 10px et bien il va faire 3->0->10...

Donc juste avant la modification la div devient carré !

Une idée du problème ?
Normal ?

Merci pour votre aide

oui comportement curieux...
on peut le contourner en precisant individuellement les border radius:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
$("#bidule")
  .css({
    WebkitBorderTopLeftRadius: 3, 
    WebkitBorderTopRightRadius: 3, 
    WebkitBorderBottomLeftRadius: 3, 
    WebkitBorderBottomRightRadius: 3, 
    MozBorderRadius: 3, 
    BorderRadius: 3 })
  .animate({
    WebkitBorderTopLeftRadius: 10, 
    WebkitBorderTopRightRadius: 10, 
    WebkitBorderBottomLeftRadius: 10, 
    WebkitBorderBottomRightRadius: 10, 
    MozBorderRadius: 10, 
    BorderRadius: 10}, 1000);

14/09/2010, 21h52
nims

En effet, le comportement est curieux !

Merci pour l'astuce!

Bonsoir

:ccool:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<img src="../images/imageTest.png"/>
 
$("img").css({
	border: "3px solid #c96c36",
	WebkitBorderTopLeftRadius: "3px", 
	WebkitBorderTopRightRadius: "3px", 
	WebkitBorderBottomLeftRadius: "3px", 
	WebkitBorderBottomRightRadius: "3px", 
	MozBorderRadius: "3px", 
	BorderRadius: "3px"
}).animate({
	border: "200px solid #c96c36",
	WebkitBorderTopLeftRadius: "200px", 
	WebkitBorderTopRightRadius: "200px", 
	WebkitBorderBottomLeftRadius: "200px", 
	WebkitBorderBottomRightRadius: "200px", 
	MozBorderRadius: "200px", 
	BorderRadius: "200px"
}, "slow");

Pour continuer dans le fun:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<script type="text/javascript">
$(function(){
 
$("#foo").css({
    WebkitBorderTopLeftRadius: '3px', 
    WebkitBorderTopRightRadius: '3px', 
    WebkitBorderBottomLeftRadius: '3px', 
    WebkitBorderBottomRightRadius: '3px', 
    MozBorderRadius: '3px', 
    BorderRadius: '3px' })
  .animate({
    WebkitBorderTopLeftRadius: '100px', 
    WebkitBorderTopRightRadius: '100px', 
    WebkitBorderBottomLeftRadius: '100px', 
    WebkitBorderBottomRightRadius: '100px', 
    MozBorderRadius: '200px', 
    BorderRadius: '200px',
    height:'200px',
    width:'200px'}, 2000);
    })
</script>
<style type="text/css">
 #foo {height:1px;
  width:1px;
  border :solid 3px red;
  MozBorderRadius: '3px', 
  text-align:center;
  margin:auto;
 background-color:green;
 color:#ffffff;
 margin-top:10%;
 overflow:hidden;
   }
  p {text-align:center;
     margin-top:40%;}
 
 
</style>
 </head>
<body>
 
<div id="foo"><p>coucou</p></div>
 
</body>
</html>

:ccool:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$("#foo").css({
	"-moz-box-shadow": "1px 1px 0px 0px grey",
	"-webkit-box-shadow": "1px 1px 0px 0px grey",
	"box-shadow": "1px 1px 0px 0px grey",
	"-moz-border-radius": "4px",
	"-webkit-border-radius": "4px",
	"border-radius": "4px"
}).animate({
	"-moz-box-shadow": "6px 6px 12px -1px grey",
	"-webkit-box-shadow": "6px 6px 12px -1px grey",
	"box-shadow": "6px 6px 12px -1px grey",
	"-moz-border-radius": "100px",
	"-webkit-border-radius": "100px",
	"border-radius": "100px",
	height:'200px',
	width:'200px'
}, 4000);

15/09/2010, 11h11
SpaceFrog

marrant aussi avec un border outset :D