Я написал следующее в методе JavaScript:
<html>
...
<script type="text/javascript" charset="utf-8">
$(function() {
$('#layout').svg({});
var svg = $('#layout').svg('get');
svg.rect(150, 50, 100, 50, 10, 10, {fill: 'grey'});
svg.text(200, 75, "Some Text", {'font-family':"Verdana", 'font-size':20, 'text-anchor':"middle", 'fill':"#00ff00"});
$('#layout').click(function(e) {
$(this).slideDown("slow");
});
}
...
<body>
<div id="layout" style="width: 640px; height: 480px;"></div>
</body>
</html>
В конечном итоге я пытаюсь заставить «макет» перемещаться по окну браузера. Однако я не могу заставить 'layout' двигаться в любом случае, используя slideDown () или animate () Как мне добиться эффекта?
----- Обновление (25 сентября 2011 г.) ------
Я получил работу со следующим кодом. Спасибо Джейсону за сообщение о проблеме:
<html lang="en"><head><meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8">
...
<style type="text/css">
#layout {
background: #6699FF;
height: 480px;
width: 640px;
position: relative;
}
</style>
<script type="text/javascript" charset="utf-8">
$(function() {
$('#layout').svg({});
var svg = $('#layout').svg('get');
svg.rect(150, 50, 100, 50, 10, 10, {fill: 'grey'});
svg.text(200, 75, "SomeText", {'font-family':"Verdana", 'font-size':20, 'text-anchor':"middle", 'fill':"#00ff00"});
$('#layout').click(function(e) {
$("#layout").animate({opacity: "0.1", left: "-=800"}, 500);
});
});
</script>
</head>
<body>
<div id="layout"></div>
</body>
</html>